// 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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Attributes
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
          data-test="attributes-expand"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <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>
          </span>
        </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Dropdown Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="SingleAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-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
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value=""
                />
                <div
                  class="SingleAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Multiselect Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="MultiAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-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
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value=""
                />
                <div
                  class="MultiAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            File Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="AttributeRow-fileField-id"
          >
            <div>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                data-test="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="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            References Attribute
          </div>
        </div>
        <div
          data-test="attribute-selector"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id ExtendedAttributeRow-attributeSectionButton-id MuiButton-textPrimary-id"
            data-test="button-attribute-selector"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Assign references
            </span>
          </button>
        </div>
      </div>
      <div
        data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Text Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id"
            />
            <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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Numeric Attribute
          </div>
        </div>
        <div
          class=""
          data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Boolean Attribute
          </div>
        </div>
        <div
          class=""
          data-test="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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-flex-id"
          data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Time Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-flex-id"
          data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Swatch Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="SingleAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                aria-autocomplete="list"
                aria-expanded="false"
                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"
                role="combobox"
              >
                <div
                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
                >
                  <div
                    class="AttributeRow-swatchPreview-id"
                  />
                </div>
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id AttributeRow-swatchInput-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value=""
                />
                <div
                  class="SingleAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Attributes
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
          data-test="attributes-expand"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <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>
          </span>
        </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Dropdown Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="SingleAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-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
                aria-autocomplete="list"
                aria-expanded="false"
                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"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  disabled=""
                  type="text"
                  value=""
                />
                <div
                  class="SingleAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Multiselect Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="MultiAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-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
                aria-autocomplete="list"
                aria-expanded="false"
                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"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  disabled=""
                  type="text"
                  value=""
                />
                <div
                  class="MultiAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            File Attribute
          </div>
        </div>
        <div
          class=""
          data-test="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="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="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            References Attribute
          </div>
        </div>
        <div
          data-test="attribute-selector"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id ExtendedAttributeRow-attributeSectionButton-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test="button-attribute-selector"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Assign references
            </span>
          </button>
        </div>
      </div>
      <div
        data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Text Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
            />
            <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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Numeric Attribute
          </div>
        </div>
        <div
          class=""
          data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Boolean Attribute
          </div>
        </div>
        <div
          class=""
          data-test="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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-flex-id"
          data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Time Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-flex-id"
          data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Swatch Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="SingleAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                aria-autocomplete="list"
                aria-expanded="false"
                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"
                role="combobox"
              >
                <div
                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
                >
                  <div
                    class="AttributeRow-swatchPreview-id"
                  />
                </div>
                <input
                  aria-invalid="false"
                  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=""
                  type="text"
                  value=""
                />
                <div
                  class="SingleAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Attributes
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
          data-test="attributes-expand"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <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>
          </span>
        </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Dropdown Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="SingleAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id 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
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value="Dropdown First Value"
                />
                <div
                  class="SingleAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </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>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
      >
        <div
          class="BasicAttributeRow-attributeSectionLabel-id"
          data-test="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Multiselect Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="MultiAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-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
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value=""
                />
                <div
                  class="MultiAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                  data-test-id="remove"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                  data-test-id="remove"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            File Attribute
          </div>
        </div>
        <div
          class=""
          data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                data-test="button-delete-file"
                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
                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <input
            class="FileUploadField-fileField-id"
            data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            References Attribute
          </div>
        </div>
        <div
          data-test="attribute-selector"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id ExtendedAttributeRow-attributeSectionButton-id MuiButton-textPrimary-id"
            data-test="button-attribute-selector"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Assign references
            </span>
          </button>
        </div>
      </div>
      <div
        data-test="attribute-value"
      >
        <div>
          <div
            class="SortableChip-root-id SortableChipsField-chip-id"
          >
            <div
              class="SortableChip-content-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id SortableHandle-drag-id SortableChip-sortableHandle-id"
                data-test="button-drag-handle"
                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
                class="MuiTypography-root-id MuiTypography-body1-id"
                data-test="chip-label"
              >
                References First Value
              </div>
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
                data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
                data-test="button-drag-handle"
                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
                class="MuiTypography-root-id MuiTypography-body1-id"
                data-test="chip-label"
              >
                References Second Value
              </div>
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
                data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
                data-test="button-drag-handle"
                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
                class="MuiTypography-root-id MuiTypography-body1-id"
                data-test="chip-label"
              >
                References Third Value
              </div>
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
                data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Text Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-test="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id"
            />
            <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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Numeric Attribute
          </div>
        </div>
        <div
          class=""
          data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Boolean Attribute
          </div>
        </div>
        <div
          class=""
          data-test="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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-flex-id"
          data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Date Time Attribute
          </div>
        </div>
        <div
          class="BasicAttributeRow-flex-id"
          data-test="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="attribute-label"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Swatch Attribute
          </div>
        </div>
        <div
          class=""
          data-test="attribute-value"
        >
          <div
            class="SingleAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
            >
              <div
                aria-autocomplete="list"
                aria-expanded="false"
                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"
                role="combobox"
              >
                <div
                  class="MuiInputAdornment-root-id MuiInputAdornment-positionStart-id"
                >
                  <div
                    class="AttributeRow-swatchPreview-id"
                    style="background-color:#FF0000"
                  />
                </div>
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id AttributeRow-swatchInput-id MuiInputBase-inputAdornedStart-id MuiOutlinedInput-inputAdornedStart-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value="Red"
                />
                <div
                  class="SingleAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Availability
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Availability
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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 MuiExpansionPanel-root-id ChannelWithVariantAvailabilityItemWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelWithVariantAvailabilityItemWrapperSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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:sm"
                >
                  2 variants
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                  style="font-size:sm"
                >
                  Visible since 07/30/2020
                </div>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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"
                        >
                          <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"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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"
                        >
                          <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"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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"
                        >
                          <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"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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"
                        >
                          <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"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiExpansionPanel-root-id ChannelWithVariantAvailabilityItemWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelWithVariantAvailabilityItemWrapperSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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:sm"
                >
                  2 variants
                </div>
                <div
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                  style="font-size:sm"
                >
                  Visible since 07/30/2020
                </div>
              </div>
            </div>
            <div
              aria-disabled="false"
              aria-hidden="true"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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"
                        >
                          <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"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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"
                        >
                          <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"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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"
                        >
                          <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"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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"
                        >
                          <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"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 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 Generic / 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 Generic / 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 Generic / 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 / 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 MuiIconButton-root-id"
              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
                    d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                  />
                </svg>
              </span>
            </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 MuiIconButton-root-id"
              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
                    d="M19 13H5v-2h14v2z"
                  />
                </svg>
              </span>
            </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 MuiIconButton-root-id"
              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
                    d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                  />
                </svg>
              </span>
            </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
    class="MultiAutocompleteSelectField-container-id"
    data-test="permissionGroups"
  >
    <div
      class="MuiFormControl-root-id MuiTextField-root-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
        aria-autocomplete="list"
        aria-expanded="false"
        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        role="combobox"
      >
        <input
          aria-invalid="false"
          autocomplete="off"
          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
          type="text"
          value=""
        />
        <div
          class="MultiAutocompleteSelectField-adornment-id"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <g
              style="fill-rule:evenodd"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </g>
          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
          data-test-id="remove"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <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>
          </span>
        </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
          data-test-id="remove"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <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>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Account Permission Groups Widget error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MultiAutocompleteSelectField-container-id"
    data-test="permissionGroups"
  >
    <div
      class="MuiFormControl-root-id MuiTextField-root-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
        aria-autocomplete="list"
        aria-expanded="false"
        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
        role="combobox"
      >
        <input
          aria-invalid="false"
          autocomplete="off"
          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
          type="text"
          value=""
        />
        <div
          class="MultiAutocompleteSelectField-adornment-id"
        >
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id"
            focusable="false"
            viewBox="0 0 24 24"
          >
            <g
              style="fill-rule:evenodd"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </g>
          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
          data-test-id="remove"
          disabled=""
          tabindex="-1"
          type="button"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <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>
          </span>
        </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
          data-test-id="remove"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiIconButton-label-id"
          >
            <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>
          </span>
        </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="given-name"
                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="family-name"
                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="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>
        <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="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
        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-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="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="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>
        <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>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="SingleAutocompleteSelectField-container-id"
            data-test-id="address-edit-country-select-field"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-id 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"
              >
                Country
              </label>
              <div
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="none"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value="Szwecja"
                />
                <div
                  class="SingleAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </div>
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="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>
    </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
        class="AutocompleteSelectMenu-container-id"
        data-test-id="containerAutocompleteSelect"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id 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
        class="AutocompleteSelectMenu-container-id"
        data-test-id="containerAutocompleteSelect"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id 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
          class="AutocompleteSelectMenu-container-id"
          data-test-id="containerAutocompleteSelect"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id 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
        class="AutocompleteSelectMenu-container-id"
        data-test-id="containerAutocompleteSelect"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id 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 MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
      data-test-id="showMoreButton"
      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
            d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
          />
        </svg>
      </span>
    </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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Availability
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
          data-test-id="channels-availiability-manage-button"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Manage
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
    >
      <div
        class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
      >
        Available at 3 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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Availability
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
          data-test-id="channels-availiability-manage-button"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Manage
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id ChannelsAvailabilityCard-card-id"
    >
      <div
        class="MuiTypography-root-id ChannelsAvailabilityCard-channelInfo-id MuiTypography-body1-id"
      >
        Available at 3 out of 4 channels
      </div>
      <hr
        class="Hr-root-id ChannelsAvailabilityCard-hr-id"
      />
      <div
        class="MuiPaper-root-id MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
        data-test="channel-availability-item"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Channel1
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-caption-id"
            />
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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"
                      >
                        <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"
                            />
                            <div
                              class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                />
                              </svg>
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                />
                              </svg>
                            </div>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          />
                        </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 MuiIconButton-colorPrimary-id"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <input
                              class="PrivateSwitchBase-input-id"
                              name="isPublished"
                              type="radio"
                              value="false"
                            />
                            <div
                              class="PrivateRadioButtonIcon-root-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                />
                              </svg>
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                />
                              </svg>
                            </div>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          />
                        </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"
                      >
                        <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"
                            />
                            <div
                              class="PrivateRadioButtonIcon-root-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                />
                              </svg>
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                />
                              </svg>
                            </div>
                          </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"
                      >
                        <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"
                            />
                            <div
                              class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                />
                              </svg>
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                />
                              </svg>
                            </div>
                          </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"
                        >
                          <path
                            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                          />
                        </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
        data-test="channel-availability-item"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id ChannelContentWrapperExpanderSummary-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id"
            >
              Channel2
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-caption-id"
            />
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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"
                      >
                        <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"
                            />
                            <div
                              class="PrivateRadioButtonIcon-root-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                />
                              </svg>
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                />
                              </svg>
                            </div>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          />
                        </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"
                            />
                            <div
                              class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                />
                              </svg>
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                />
                              </svg>
                            </div>
                          </span>
                        </span>
                        <span
                          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                        >
                          <p
                            class="ChannelsAvailabilityCard-label-id"
                          />
                          <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"
                      >
                        <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"
                            />
                            <div
                              class="PrivateRadioButtonIcon-root-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                />
                              </svg>
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                />
                              </svg>
                            </div>
                          </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"
                      >
                        <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"
                            />
                            <div
                              class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                />
                              </svg>
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                />
                              </svg>
                            </div>
                          </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"
                        >
                          <path
                            d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                          />
                        </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="StatusLabel-container-id"
      >
        <div
          class="undefined StatusLabel-errorDot-id"
        />
        <div
          class="StatusLabel-textContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            3/6 channels
          </div>
        </div>
      </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"
          >
            <path
              d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
            />
          </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"
          >
            <path
              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
            />
          </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"
            >
              <path
                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
              />
            </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"
          >
            <path
              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
            />
          </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"
          >
            <path
              d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10H7v-2h10v2z"
            />
          </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 MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Columns
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </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 MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Columns
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </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"
>
  <div
    class="DeletableItem-container-id"
  >
    <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>
  </div>
</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"
            >
              <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="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="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="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="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="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="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
            data-test="button-delete-file"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
      <input
        class="FileUploadField-fileField-id"
        data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
            data-test="button-delete-file"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
      <input
        class="FileUploadField-fileField-id"
        data-test="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-elevation1-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-text-id FilterContentHeader-clear-id"
              data-test="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="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 MuiExpansionPanel-root-id FilterContentExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test="channel-availability-item"
          data-test-id="createdAt"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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="filterGroupActive"
                    data-test-id="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"
                      >
                        <path
                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                        />
                      </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 MuiExpansionPanelSummary-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"
                          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="filter-field"
                        data-test-id="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="filter-field"
                        data-test-id="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 MuiExpansionPanel-root-id FilterContentExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test="channel-availability-item"
          data-test-id="multiplOptions"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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="filterGroupActive"
                    data-test-id="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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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 MuiExpansionPanelSummary-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="filter-field"
                      data-test-id="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="filterOption"
                            data-test-id="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"
                              >
                                <path
                                  d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                                />
                              </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="filterOption"
                            data-test-id="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"
                              >
                                <path
                                  d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                                />
                              </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="filterOption"
                            data-test-id="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"
                              >
                                <path
                                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                                />
                              </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 MuiExpansionPanel-root-id FilterContentExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test="channel-availability-item"
          data-test-id="price"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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="filterGroupActive"
                    data-test-id="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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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 MuiExpansionPanelSummary-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"
                          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="filter-field"
                        data-test-id="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="filter-field"
                        data-test-id="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 MuiExpansionPanel-root-id FilterContentExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test="channel-availability-item"
          data-test-id="status"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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="filterGroupActive"
                    data-test-id="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"
                      >
                        <path
                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                        />
                      </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 MuiExpansionPanelSummary-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="filter-field"
                      data-test-id="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="filterOption"
                            data-test-id="val1"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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="filterOption"
                            data-test-id="val2"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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="filterOption"
                            data-test-id="val3"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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-elevation1-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-text-id FilterContentHeader-clear-id"
              data-test="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="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 MuiExpansionPanel-root-id FilterContentExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test="channel-availability-item"
          data-test-id="createdAt"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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="filterGroupActive"
                    data-test-id="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"
                      >
                        <path
                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                        />
                      </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 MuiExpansionPanelSummary-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"
                          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="filter-field"
                        data-test-id="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="filter-field"
                        data-test-id="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 MuiExpansionPanel-root-id FilterContentExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test="channel-availability-item"
          data-test-id="multiplOptions"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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="filterGroupActive"
                    data-test-id="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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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 MuiExpansionPanelSummary-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="filter-field"
                      data-test-id="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="filterOption"
                            data-test-id="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"
                              >
                                <path
                                  d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                                />
                              </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="filterOption"
                            data-test-id="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"
                              >
                                <path
                                  d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                                />
                              </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="filterOption"
                            data-test-id="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"
                              >
                                <path
                                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                                />
                              </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 MuiExpansionPanel-root-id FilterContentExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test="channel-availability-item"
          data-test-id="price"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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="filterGroupActive"
                    data-test-id="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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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 MuiExpansionPanelSummary-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"
                          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="filter-field"
                        data-test-id="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="filter-field"
                        data-test-id="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 MuiExpansionPanel-root-id FilterContentExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          data-test="channel-availability-item"
          data-test-id="status"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id FilterContentExpanderSummary-root-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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="filterGroupActive"
                    data-test-id="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"
                      >
                        <path
                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                        />
                      </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 MuiExpansionPanelSummary-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="filter-field"
                      data-test-id="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="filterOption"
                            data-test-id="val1"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                checked=""
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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="filterOption"
                            data-test-id="val2"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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="filterOption"
                            data-test-id="val3"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <input
                                class="PrivateSwitchBase-input-id"
                                name="status"
                                type="radio"
                              />
                              <div
                                class="PrivateRadioButtonIcon-root-id"
                              >
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                  />
                                </svg>
                                <svg
                                  aria-hidden="true"
                                  class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                  focusable="false"
                                  viewBox="0 0 24 24"
                                >
                                  <path
                                    d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                  />
                                </svg>
                              </div>
                            </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 / 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 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="metadataEditor"
    data-test-expanded="true"
    data-test-is-private="false"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Metadata
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id Metadata-content-id"
    >
      <div
        class="Metadata-togglable-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
        >
          3 Fields
        </div>
        <button
          class="MuiButtonBase-root-id MuiIconButton-root-id"
          data-test="expand"
          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
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </span>
        </button>
      </div>
    </div>
    <table
      class="MuiTable-root-id Metadata-table-id"
    >
      <thead
        class="MuiTableHead-root-id"
      >
        <tr
          class="MuiTableRow-root-id MuiTableRow-head-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"
          data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
              data-test="deleteField"
              data-test-id="0"
              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
                    d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                  />
                </svg>
              </span>
            </button>
          </td>
        </tr>
        <tr
          class="MuiTableRow-root-id"
          data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
              data-test="deleteField"
              data-test-id="1"
              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
                    d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                  />
                </svg>
              </span>
            </button>
          </td>
        </tr>
        <tr
          class="MuiTableRow-root-id"
          data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
              data-test="deleteField"
              data-test-id="2"
              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
                    d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                  />
                </svg>
              </span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <div
      class="MuiCardActions-root-id MuiCardActions-spacing-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
        data-test="addField"
        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="metadataEditor"
    data-test-expanded="true"
    data-test-is-private="true"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Private Metadata
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id Metadata-content-id"
    />
    <div
      class="Metadata-emptyContainer-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
      >
        There is no private metadata created for this element.
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
      >
        Use the button below to add new metadata field
      </div>
    </div>
    <div
      class="MuiCardActions-root-id MuiCardActions-spacing-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
        data-test="addField"
        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="metadataEditor"
    data-test-expanded="true"
    data-test-is-private="false"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Metadata
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id Metadata-content-id"
    >
      <div
        class="Metadata-togglable-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
        >
          3 Fields
        </div>
        <button
          class="MuiButtonBase-root-id MuiIconButton-root-id"
          data-test="expand"
          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
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </span>
        </button>
      </div>
    </div>
    <table
      class="MuiTable-root-id Metadata-table-id"
    >
      <thead
        class="MuiTableHead-root-id"
      >
        <tr
          class="MuiTableRow-root-id MuiTableRow-head-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"
          data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
              data-test="deleteField"
              data-test-id="0"
              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
                    d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                  />
                </svg>
              </span>
            </button>
          </td>
        </tr>
        <tr
          class="MuiTableRow-root-id"
          data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
              data-test="deleteField"
              data-test-id="1"
              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
                    d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                  />
                </svg>
              </span>
            </button>
          </td>
        </tr>
        <tr
          class="MuiTableRow-root-id"
          data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
              data-test="deleteField"
              data-test-id="2"
              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
                    d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                  />
                </svg>
              </span>
            </button>
          </td>
        </tr>
      </tbody>
    </table>
    <div
      class="MuiCardActions-root-id MuiCardActions-spacing-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
        data-test="addField"
        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="metadataEditor"
    data-test-expanded="true"
    data-test-is-private="true"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Private Metadata
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id Metadata-content-id"
    />
    <div
      class="Metadata-emptyContainer-id"
    >
      <div
        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
      >
        There is no private metadata created for this element.
      </div>
      <div
        class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
      >
        Use the button below to add new metadata field
      </div>
    </div>
    <div
      class="MuiCardActions-root-id MuiCardActions-spacing-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
        data-test="addField"
        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="metadataEditor"
    data-test-expanded="true"
    data-test-is-private="false"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Metadata
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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="metadataEditor"
    data-test-expanded="true"
    data-test-is-private="true"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Private Metadata
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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"
    >
      <div
        class="Money-container-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-caption-id"
        >
          EUR
        </div>
        <div
          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
        />
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          14.00
        </div>
      </div>
    </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-elevation1-id MuiPaper-rounded-id"
      >
        <div
          class="MultiAutocompleteSelectFieldContent-content-id"
          data-test-id="multiautocomplete-select-content"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <hr
            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
          />
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Åland Islands
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Albania
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Algeria
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              American Samoa
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              AndorrA
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Angola
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Anguilla
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antarctica
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </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-elevation1-id MuiPaper-rounded-id"
      >
        <div
          class="MultiAutocompleteSelectFieldContent-content-id"
          data-test-id="multiautocomplete-select-content"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <hr
            class="Hr-root-id MultiAutocompleteSelectFieldContent-hr-id"
          />
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Afghanistan
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Åland Islands
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Albania
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Algeria
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              American Samoa
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              AndorrA
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Angola
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Anguilla
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </svg>
              </span>
            </span>
            <span
              class="MultiAutocompleteSelectFieldContent-menuItemLabel-id"
            >
              Antarctica
            </span>
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </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
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-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
            aria-autocomplete="list"
            aria-expanded="false"
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            role="combobox"
          >
            <input
              aria-invalid="false"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              placeholder="Select country"
              type="text"
              value=""
            />
            <div
              class="MultiAutocompleteSelectField-adornment-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              data-test-id="remove"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <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>
              </span>
            </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
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-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
            aria-autocomplete="list"
            aria-expanded="false"
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            role="combobox"
          >
            <input
              aria-invalid="false"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              placeholder="Select country"
              type="text"
              value=""
            />
            <div
              class="MultiAutocompleteSelectField-adornment-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              data-test-id="remove"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <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>
              </span>
            </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
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-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
            aria-autocomplete="list"
            aria-expanded="false"
            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"
            role="combobox"
          >
            <input
              aria-invalid="true"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              placeholder="Select country"
              type="text"
              value=""
            />
            <div
              class="MultiAutocompleteSelectField-adornment-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              data-test-id="remove"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <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>
              </span>
            </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
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-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
            aria-autocomplete="list"
            aria-expanded="false"
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            role="combobox"
          >
            <input
              aria-invalid="false"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              placeholder="Select country"
              type="text"
              value=""
            />
            <div
              class="MultiAutocompleteSelectField-adornment-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              data-test-id="remove"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <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>
              </span>
            </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-elevation1-id MuiPaper-rounded-id"
      >
        <div
          class="MultiAutocompleteSelectFieldContent-content-id"
          data-test-id="multiautocomplete-select-content"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MultiAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-test="multiautocomplete-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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </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 MuiIconButton-root-id NavigatorButton-root-id"
        data-test="navigator"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiIconButton-label-id"
        />
      </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 MuiIconButton-root-id NavigatorButton-root-id"
        data-test="navigator"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiIconButton-label-id"
        />
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
    >
      Lorem ipsum
    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
    >
      Lorem ipsum
    </div>
    <div
      class="ExtendedPageHeader-action-id"
    >
      <div
        class="PageHeader-root-id"
      >
        <button
          class="MuiButtonBase-root-id MuiIconButton-root-id"
          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
                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
              />
            </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
    >
      <span
        class="Skeleton-skeleton-id"
        data-test-id="skeleton"
        style="width:10em"
      >
        ‌
      </span>
    </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"
            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"
            type="number"
          />
          <div
            class="MuiInputAdornment-root-id PriceField-currencySymbol-id MuiInputAdornment-positionEnd-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              $
            </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"
            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"
            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"
            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"
            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"
            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"
            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"
            >
              $
            </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"
            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"
            >
              $
            </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="richTextEditor"
        data-test-id="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>
        <div
          class="RichTextEditor-editor-id RichTextEditor-root-id"
        />
        <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="richTextEditor"
        data-test-id="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>
        <div
          class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
        />
        <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="richTextEditor"
        data-test-id="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>
        <div
          class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootError-id"
        />
        <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 / 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-elevation1-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
          data-test="autocomplete-dropdown"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AF"
            role="menuitem"
            tabindex="-1"
          >
            Afghanistan
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AX"
            role="menuitem"
            tabindex="-1"
          >
            Åland Islands
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AL"
            role="menuitem"
            tabindex="-1"
          >
            Albania
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="DZ"
            role="menuitem"
            tabindex="-1"
          >
            Algeria
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AS"
            role="menuitem"
            tabindex="-1"
          >
            American Samoa
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AD"
            role="menuitem"
            tabindex="-1"
          >
            AndorrA
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AO"
            role="menuitem"
            tabindex="-1"
          >
            Angola
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AI"
            role="menuitem"
            tabindex="-1"
          >
            Anguilla
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AQ"
            role="menuitem"
            tabindex="-1"
          >
            Antarctica
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-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-elevation1-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
          data-test="autocomplete-dropdown"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AF"
            role="menuitem"
            tabindex="-1"
          >
            Afghanistan
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AX"
            role="menuitem"
            tabindex="-1"
          >
            Åland Islands
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AL"
            role="menuitem"
            tabindex="-1"
          >
            Albania
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="DZ"
            role="menuitem"
            tabindex="-1"
          >
            Algeria
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AS"
            role="menuitem"
            tabindex="-1"
          >
            American Samoa
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AD"
            role="menuitem"
            tabindex="-1"
          >
            AndorrA
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AO"
            role="menuitem"
            tabindex="-1"
          >
            Angola
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AI"
            role="menuitem"
            tabindex="-1"
          >
            Anguilla
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AQ"
            role="menuitem"
            tabindex="-1"
          >
            Antarctica
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-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 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="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id 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"
            >
              Country
            </label>
            <div
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div
                class="SingleAutocompleteSelectField-adornment-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Country
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-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
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id 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"
            >
              Country
            </label>
            <div
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div
                class="SingleAutocompleteSelectField-adornment-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Country
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-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
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id 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"
            >
              Country
            </label>
            <div
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div
                class="SingleAutocompleteSelectField-adornment-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Country
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-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
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-id 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"
            >
              Country
            </label>
            <div
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Select country"
                type="text"
                value="Afghanistan"
              />
              <div
                class="SingleAutocompleteSelectField-adornment-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </svg>
              </div>
              <fieldset
                aria-hidden="true"
                class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              >
                <legend
                  class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                >
                  <span>
                    Country
                  </span>
                </legend>
              </fieldset>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-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
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            aria-autocomplete="list"
            aria-expanded="false"
            aria-label="naked"
            class="MuiInputBase-root-id SingleAutocompleteSelectField-nakedInput-id MuiInputBase-fullWidth-id MuiInputBase-adornedEnd-id"
            helpertext="Value: AF"
            inputprops="[object Object]"
            label="Country"
            role="combobox"
          >
            <input
              autocomplete="off"
              autofocus=""
              class="MuiInputBase-input-id MuiInputBase-inputAdornedEnd-id"
              placeholder="Select country"
              type="text"
              value="Afghanistan"
            />
            <div
              class="SingleAutocompleteSelectField-adornment-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </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-elevation1-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
          data-test="autocomplete-dropdown"
        >
          <div
            aria-disabled="true"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-disabled-id MuiListItem-button-id MuiButtonBase-disabled-id"
            data-test="singleautocomplete-select-no-options"
            role="menuitem"
            tabindex="-1"
          >
            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-elevation1-id MuiPaper-rounded-id"
      >
        <div
          class="SingleAutocompleteSelectFieldContent-content-id"
          data-test="autocomplete-dropdown"
        >
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-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
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-selected-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id MuiListItem-selected-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AF"
            role="menuitem"
            tabindex="-1"
          >
            Afghanistan
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AX"
            role="menuitem"
            tabindex="-1"
          >
            Åland Islands
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AL"
            role="menuitem"
            tabindex="-1"
          >
            Albania
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="DZ"
            role="menuitem"
            tabindex="-1"
          >
            Algeria
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AS"
            role="menuitem"
            tabindex="-1"
          >
            American Samoa
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AD"
            role="menuitem"
            tabindex="-1"
          >
            AndorrA
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AO"
            role="menuitem"
            tabindex="-1"
          >
            Angola
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AI"
            role="menuitem"
            tabindex="-1"
          >
            Anguilla
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-select-option"
            data-test-type="option"
            data-test-value="AQ"
            role="menuitem"
            tabindex="-1"
          >
            Antarctica
          </div>
          <div
            aria-disabled="false"
            class="MuiButtonBase-root-id MuiListItem-root-id MuiMenuItem-root-id SingleAutocompleteSelectFieldContent-menuItem-id MuiMenuItem-gutters-id MuiListItem-gutters-id MuiListItem-button-id"
            data-test="singleautocomplete-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 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 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 SortableHandle-drag-id SortableChip-sortableHandle-id"
            data-test="button-drag-handle"
            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
            class="MuiTypography-root-id MuiTypography-body1-id"
            data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
            data-test="button-drag-handle"
            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
            class="MuiTypography-root-id MuiTypography-body1-id"
            data-test="chip-label"
          >
            Lorem Ipsum
          </div>
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
            data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 1
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 2
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 3
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 4
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 5
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 6
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 1
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 2
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 3
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 4
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 5
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 SortableHandle-drag-id SortableChip-sortableHandle-id"
              data-test="button-drag-handle"
              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
              class="MuiTypography-root-id MuiTypography-body1-id"
              data-test="chip-label"
            >
              Item 6
            </div>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id SortableChip-closeIcon-id"
              data-test="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 / Status Chip alert 1`] = `
<div
  style="padding:24px"
>
  <div
    class="StatusChip-root-id StatusChip-alert-id StatusChip-lg-id"
  >
    <div
      class="MuiTypography-root-id StatusChip-label-id StatusChip-alertLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
    >
      label
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Status Chip error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="StatusChip-root-id StatusChip-error-id StatusChip-lg-id"
  >
    <div
      class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
    >
      label
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Status Chip neutral 1`] = `
<div
  style="padding:24px"
>
  <div
    class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
  >
    <div
      class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
    >
      label
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Status Chip success 1`] = `
<div
  style="padding:24px"
>
  <div
    class="StatusChip-root-id StatusChip-success-id StatusChip-lg-id"
  >
    <div
      class="MuiTypography-root-id StatusChip-label-id StatusChip-successLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
    >
      label
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / StatusLabel when 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="StatusLabel-container-id"
      >
        <div
          class="undefined StatusLabel-errorDot-id"
        />
        <div
          class="StatusLabel-textContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Example label
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / StatusLabel when neutral 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="StatusLabel-container-id"
      >
        <div
          class="undefined StatusLabel-neutralDot-id"
        />
        <div
          class="StatusLabel-textContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Example label
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / StatusLabel when success 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="StatusLabel-container-id"
      >
        <div
          class="undefined StatusLabel-successDot-id"
        />
        <div
          class="StatusLabel-textContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Example label
          </div>
        </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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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"
          >
            <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 TablePagination-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-back"
                      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
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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 TablePagination-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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 TablePagination-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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 TablePagination-root-id"
                colspan="1"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-back"
                      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
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-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 / 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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Sales channel
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Sales channel
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Sales channel
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Sales channel
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
          >
            ‌
          </span>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Orders / OrderAddressEditDialog shipping address 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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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 / OrderCustomerAddressesEditDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

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

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

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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            aria-disabled="false"
            aria-expanded="false"
            class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
            role="button"
            tabindex="0"
          >
            <div
              class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        style="font-size:sm"
                      >
                        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:sm"
                              >
                                Cow's milk
                              </div>
                            </td>
                            <td
                              class="OrderHistory-linesTableCell-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                              >
                                Goat's milk
                              </div>
                            </td>
                            <td
                              class="OrderHistory-linesTableCell-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                      >
                        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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Invoices
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Generate
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Invoices
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Generate
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Invoices
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Generate
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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 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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Order Value
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id 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="noLimits"
                type="checkbox"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                />
              </svg>
            </span>
          </span>
          <span
            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
          >
            There are no value limits
            <div
              class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
            >
              This rate will apply to all orders of all prices
            </div>
          </span>
        </label>
        <div
          class="MuiTypography-root-id OrderValue-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 OrderValue-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-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"
            >
              <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"
                      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"
                      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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Order Value
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <div
      class="MuiCardContent-root-id 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="noLimits"
                type="checkbox"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                />
              </svg>
            </span>
          </span>
          <span
            class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
          >
            There are no value limits
            <div
              class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
            >
              This rate will apply to all orders of all prices
            </div>
          </span>
        </label>
        <div
          class="MuiTypography-root-id OrderValue-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 OrderValue-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-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"
            >
              <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"
                      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"
                      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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Order Weight
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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="noLimits"
              type="checkbox"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
              />
            </svg>
          </span>
        </span>
        <span
          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
        >
          There are no value limits
          <div
            class="MuiTypography-root-id OrderWeight-caption-id MuiTypography-caption-id"
          >
            This rate will apply to all orders
          </div>
        </span>
      </label>
      <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"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              min="0"
              name="minValue"
              type="number"
              value="1"
            />
            <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"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              min="1"
              name="maxValue"
              type="number"
              value="2"
            />
            <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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Order Weight
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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="noLimits"
              type="checkbox"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
              />
            </svg>
          </span>
        </span>
        <span
          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
        >
          There are no value limits
          <div
            class="MuiTypography-root-id OrderWeight-caption-id MuiTypography-caption-id"
          >
            This rate will apply to all orders
          </div>
        </span>
      </label>
      <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"
          >
            <input
              aria-invalid="true"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              min="0"
              name="minValue"
              type="number"
              value="1"
            />
            <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"
          >
            <input
              aria-invalid="true"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              min="1"
              name="maxValue"
              type="number"
              value="2"
            />
            <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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Order Weight
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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="noLimits"
              type="checkbox"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
              />
            </svg>
          </span>
        </span>
        <span
          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
        >
          There are no value limits
          <div
            class="MuiTypography-root-id OrderWeight-caption-id MuiTypography-caption-id"
          >
            This rate will apply to all orders
          </div>
        </span>
      </label>
      <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"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
              disabled=""
              min="0"
              name="minValue"
              type="number"
              value="1"
            />
            <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"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
              disabled=""
              min="1"
              name="maxValue"
              type="number"
              value="2"
            />
            <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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Order Weight
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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="noLimits"
              type="checkbox"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id"
              focusable="false"
              viewBox="0 0 24 24"
            >
              <path
                d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
              />
            </svg>
          </span>
        </span>
        <span
          class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
        >
          There are no value limits
          <div
            class="MuiTypography-root-id OrderWeight-caption-id MuiTypography-caption-id"
          >
            This rate will apply to all orders
          </div>
        </span>
      </label>
      <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"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              min="0"
              name="minValue"
              type="number"
              value=""
            />
            <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"
          >
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              min=""
              name="maxValue"
              type="number"
              value=""
            />
            <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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Pricing
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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"
            >
              <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"
            >
              <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=""
                      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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Pricing
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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"
            >
              <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"
            >
              <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=""
                      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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Excluded Products
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            Assign products
          </span>
        </button>
      </div>
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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"
          >
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id TableHead-checkboxSelected-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"
                  >
                    <path
                      d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                    />
                  </svg>
                </span>
              </span>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-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"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
              colspan="3"
            >
              <div
                class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    data-test="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                    data-test="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                      </svg>
                    </span>
                  </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"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
              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 MuiAvatar-fallback-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="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 MuiIconButton-root-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                    />
                  </svg>
                </span>
              </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Price Rate Create
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Order Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id 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="noLimits"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    There are no value limits
                    <div
                      class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders of all prices
                    </div>
                  </span>
                </label>
                <div
                  class="MuiTypography-root-id OrderValue-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 OrderValue-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-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"
                    >
                      <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"
                              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"
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <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"
                    >
                      <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=""
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Postal codes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                  >
                    <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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-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 MuiIconButton-colorPrimary-id"
                        data-test="delete-postal-code"
                        data-test-id="1"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-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 MuiIconButton-colorPrimary-id"
                        data-test="delete-postal-code"
                        data-test-id="1"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Weight Rate Create
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Order Weight
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="noLimits"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  There are no value limits
                  <div
                    class="MuiTypography-root-id OrderWeight-caption-id MuiTypography-caption-id"
                  >
                    This rate will apply to all orders
                  </div>
                </span>
              </label>
              <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="minValue"
                      type="number"
                      value=""
                    />
                    <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min=""
                      name="maxValue"
                      type="number"
                      value=""
                    />
                    <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <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"
                    >
                      <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=""
                              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"
                    >
                      <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=""
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Postal codes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                  >
                    <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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-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 MuiIconButton-colorPrimary-id"
                        data-test="delete-postal-code"
                        data-test-id="1"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-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 MuiIconButton-colorPrimary-id"
                        data-test="delete-postal-code"
                        data-test-id="1"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Price Rate Create
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Order Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id 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="noLimits"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    There are no value limits
                    <div
                      class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders of all prices
                    </div>
                  </span>
                </label>
                <div
                  class="MuiTypography-root-id OrderValue-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 OrderValue-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-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"
                    >
                      <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"
                              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"
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <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"
                    >
                      <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=""
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Postal codes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                  >
                    <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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-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 MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="delete-postal-code"
                        data-test-id="1"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-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 MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="delete-postal-code"
                        data-test-id="1"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 card 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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Shipping Zones
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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 MuiExpansionPanel-root-id ShippingZonesCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
    >
      <div
        class="ShippingZonesListHeader-container-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ShippingZonesListHeader-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id ShippingZonesListHeader-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
            >
              0 Shipping Zones
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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="CardAddItemsFooter-container-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                  data-test-id="add-shipping-zone-link"
                >
                  Add Shipping Zones
                </a>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test-id="add-shipping-zone-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
                        d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Shipping zones card with options selected 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Shipping Zones
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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 MuiExpansionPanel-root-id ShippingZonesCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
    >
      <div
        class="ShippingZonesListHeader-container-id"
      >
        <div
          aria-disabled="false"
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ShippingZonesListHeader-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id ShippingZonesListHeader-content-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
            >
              2 Shipping Zones
            </div>
          </div>
          <div
            aria-disabled="false"
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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="ShippingZoneItem-container-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Fancy shipping zone
                </div>
                <div
                  class="DeletableItem-container-id"
                >
                  <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>
                </div>
              </div>
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="ShippingZoneItem-container-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body1-id"
                >
                  Nice shipping zone
                </div>
                <div
                  class="DeletableItem-container-id"
                >
                  <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>
                </div>
              </div>
              <hr
                class="MuiDivider-root-id"
              />
              <div
                class="CardAddItemsFooter-container-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                  data-test-id="add-shipping-zone-link"
                >
                  Add Shipping Zones
                </a>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test-id="add-shipping-zone-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
                        d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Settings
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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
          class="MultiAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-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
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Add Channel"
                type="text"
                value=""
              />
              <div
                class="MultiAutocompleteSelectField-adornment-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="remove"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <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>
                </span>
              </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
          class="MultiAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-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
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                placeholder="Select Warehouse"
                type="text"
                value=""
              />
              <div
                class="MultiAutocompleteSelectField-adornment-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="warehousesRemove"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <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>
                </span>
              </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="warehousesRemove"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <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>
                </span>
              </button>
            </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 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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        app1 
      </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-tc="open-app"
            href="http://localhost:8888/homepage"
            tabindex="0"
            target="_blank"
          >
            <span
              class="MuiButton-label-id"
            >
              Open App
            </span>
          </a>
        </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"
          >
            <img
              alt=""
              src="support-icon.svg"
            />
            Get Support
          </div>
        </a>
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id AppList-headerLinkContainer-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            <img
              alt=""
              src="settings-icon.svg"
            />
            Edit settings
          </span>
        </button>
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id AppList-headerLinkContainer-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            <img
              alt=""
              src="activate-icon.svg"
            />
            Deactivate
          </span>
        </button>
      </div>
      <div
        class="AppList-hr-id"
      />
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          About this app
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          App permissions
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Data privacy
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <div
        class="MuiCardContent-root-id"
      >
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Lorem ipsum
        </div>
        <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        app1 
      </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-tc="open-app"
            href="http://localhost:8888/homepage"
            tabindex="0"
            target="_blank"
          >
            <span
              class="MuiButton-label-id"
            >
              Open App
            </span>
          </a>
        </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"
          >
            <img
              alt=""
              src="support-icon.svg"
            />
            Get Support
          </div>
        </a>
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id AppList-headerLinkContainer-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            <img
              alt=""
              src="settings-icon.svg"
            />
            Edit settings
          </span>
        </button>
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id AppList-headerLinkContainer-id MuiButton-textPrimary-id"
          tabindex="0"
          type="button"
        >
          <span
            class="MuiButton-label-id"
          >
            <img
              alt=""
              src="activate-icon.svg"
            />
            Deactivate
          </span>
        </button>
      </div>
      <div
        class="AppList-hr-id"
      />
    </div>
    <div
      class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
    >
      <div
        class="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          About this app
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          App permissions
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Data privacy
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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 details settings default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="Grid-root-id Grid-uniform-id"
    >
      <div
        class="AppDetailsSettingsPage-breadcrumbContainer-id"
      >
        <div
          class="AppDetailsSettingsPage-breadcrumbs-id"
        >
          <div
            class="MuiTypography-root-id AppDetailsSettingsPage-breadcrumb-id AppDetailsSettingsPage-breadcrumbDisabled-id MuiTypography-h5-id"
          >
            app1
          </div>
        </div>
      </div>
      <div
        class="AppDetailsSettingsPage-appSettingsHeader-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>
        <a
          aria-disabled="false"
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
          data-tc="open-app"
          href="http://localhost:8888/homepage"
          tabindex="0"
          target="_blank"
        >
          <span
            class="MuiButton-label-id"
          >
            My App
          </span>
        </a>
        <a
          aria-disabled="false"
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
          data-tc="open-support"
          href="http://localhost:8888/support"
          tabindex="0"
          target="_blank"
        >
          <span
            class="MuiButton-label-id"
          >
            Support/FAQ
          </span>
        </a>
      </div>
    </div>
    <div
      class="CardSpacer-spacer-id"
    />
    <hr
      class="Hr-root-id"
    />
    <div
      class="CardSpacer-spacer-id"
    />
    <div
      class="AppDetailsSettingsPage-iframeContainer-id"
    />
    <div
      class="CardSpacer-spacer-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Apps
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Ongoing Installations
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-appContent-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id AppList-tableRow-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"
                    >
                      There was a problem during installation
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
                        />
                      </svg>
                    </div>
                    <button
                      class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiButton-label-id"
                      >
                        Retry
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id AppList-tableRow-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"
                >
                  <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>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Third-party Apps
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-appContent-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="2"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                            data-test-id="rowNumberSelect"
                          >
                            <div
                              aria-haspopup="listbox"
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              aria-hidden="true"
                              class="MuiSelect-nativeInput-id"
                              tabindex="-1"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-test="button-pagination-next"
                          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
                                d="M10 17l5-5-5-5v10z"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id AppList-tableRow-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"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiButton-label-id"
                      >
                        About
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id AppList-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
                  >
                    <span
                      class="AppList-appName-id"
                      data-tc="name"
                    >
                      app1
                    </span>
                    <div
                      class="AppList-statusWrapper-id"
                    >
                      <div
                        class="MuiTypography-root-id DeactivatedText-root-id MuiTypography-body1-id"
                      >
                        Deactivated
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id AppList-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiButton-label-id"
                      >
                        About
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id AppList-title-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id AppList-title-id MuiTypography-h5-id"
            >
              Local Apps
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="createApp"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create App
              </span>
            </button>
          </div>
        </div>
        <hr
          class="AppList-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-appContent-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id AppList-tableRow-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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Saleor Marketplace
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-marketplaceContent-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Marketplace is coming soon
          </div>
        </div>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Apps
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Third-party Apps
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-appContent-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="2"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                            data-test-id="rowNumberSelect"
                          >
                            <div
                              aria-haspopup="listbox"
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              aria-hidden="true"
                              class="MuiSelect-nativeInput-id"
                              tabindex="-1"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-next"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id AppList-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id AppList-title-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id AppList-title-id MuiTypography-h5-id"
            >
              Local Apps
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="createApp"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create App
              </span>
            </button>
          </div>
        </div>
        <hr
          class="AppList-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-appContent-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id AppList-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id AppList-colName-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Saleor Marketplace
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-marketplaceContent-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Marketplace is coming soon
          </div>
        </div>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Apps
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Third-party Apps
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-appContent-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tfoot
                class="MuiTableFooter-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-footer-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="2"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                            data-test-id="rowNumberSelect"
                          >
                            <div
                              aria-haspopup="listbox"
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              aria-hidden="true"
                              class="MuiSelect-nativeInput-id"
                              tabindex="-1"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-test="button-pagination-next"
                          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
                                d="M10 17l5-5-5-5v10z"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id AppList-tableRow-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>
    </div>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="MuiCardHeader-root-id AppList-title-id"
        >
          <div
            class="MuiCardHeader-content-id"
          >
            <span
              class="MuiTypography-root-id AppList-title-id MuiTypography-h5-id"
            >
              Local Apps
            </span>
          </div>
          <div
            class="MuiCardHeader-action-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="createApp"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create App
              </span>
            </button>
          </div>
        </div>
        <hr
          class="AppList-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-appContent-id"
        >
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id AppList-tableRow-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>
    <div
      class="AppList-appContainer-id"
    >
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Saleor Marketplace
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id AppList-marketplaceContent-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Marketplace is coming soon
          </div>
        </div>
      </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          You are about to install app
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          App permissions
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
            >
              Cancel
            </div>
          </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"
          >
            <div
              class="MuiTypography-root-id AppList-installText-id MuiTypography-body1-id"
            >
              Install App
            </div>
          </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
          >
            ‌
          </span>
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          App permissions
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
            >
              Cancel
            </div>
          </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"
          >
            <div
              class="MuiTypography-root-id AppList-installText-id MuiTypography-body1-id"
            >
              Install App
            </div>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Apps / Webhooks / Create webhook 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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Webhook
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General 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"
                >
                  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="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific 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"
                >
                  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"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="secretKey"
                    type="text"
                    value=""
                  />
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </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="allEvents"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <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="CHECKOUT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout created
                  </span>
                </label>
              </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="CHECKOUT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout updated
                  </span>
                </label>
              </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="CUSTOMER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </span>
                </label>
              </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="CUSTOMER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer updated
                  </span>
                </label>
              </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="DRAFT_ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order created
                  </span>
                </label>
              </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="DRAFT_ORDER_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order deleted
                  </span>
                </label>
              </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="DRAFT_ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order updated
                  </span>
                </label>
              </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="FULFILLMENT_CANCELED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </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="FULFILLMENT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </span>
                </label>
              </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="INVOICE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice deleted
                  </span>
                </label>
              </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="INVOICE_REQUESTED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice requested
                  </span>
                </label>
              </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="INVOICE_SENT"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice sent
                  </span>
                </label>
              </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="NOTIFY_USER"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User notified
                  </span>
                </label>
              </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="ORDER_CANCELLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </span>
                </label>
              </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="ORDER_CONFIRMED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order confirmed
                  </span>
                </label>
              </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="ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </span>
                </label>
              </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="ORDER_FULFILLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </span>
                </label>
              </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="ORDER_FULLY_PAID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </span>
                </label>
              </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="ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </span>
                </label>
              </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="PAGE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page created
                  </span>
                </label>
              </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="PAGE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page deleted
                  </span>
                </label>
              </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="PAGE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page updated
                  </span>
                </label>
              </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="PAYMENT_AUTHORIZE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Authorize payment
                  </span>
                </label>
              </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="PAYMENT_CAPTURE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Capture payment
                  </span>
                </label>
              </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="PAYMENT_CONFIRM"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Confirm payment
                  </span>
                </label>
              </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="PAYMENT_LIST_GATEWAYS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    List payment gateways
                  </span>
                </label>
              </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="PAYMENT_PROCESS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Process payment
                  </span>
                </label>
              </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="PAYMENT_REFUND"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Refund payment
                  </span>
                </label>
              </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="PAYMENT_VOID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Void payment
                  </span>
                </label>
              </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="PRODUCT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </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="PRODUCT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product deleted
                  </span>
                </label>
              </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="PRODUCT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product updated
                  </span>
                </label>
              </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="PRODUCT_VARIANT_BACK_IN_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant back in stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant created
                  </span>
                </label>
              </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="PRODUCT_VARIANT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant deleted
                  </span>
                </label>
              </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="PRODUCT_VARIANT_OUT_OF_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant out of stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant updated
                  </span>
                </label>
              </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="SALE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale created
                  </span>
                </label>
              </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="SALE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale deleted
                  </span>
                </label>
              </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="SALE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale updated
                  </span>
                </label>
              </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="TRANSLATION_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation created
                  </span>
                </label>
              </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="TRANSLATION_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Apps / Webhooks / Create webhook 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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Webhook
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General 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-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  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=""
                  />
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id"
                    >
                      <span>
                        Webhook 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"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific 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-error-id MuiInputLabel-error-id"
                  data-shrink="false"
                >
                  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=""
                  />
                  <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-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"
                >
                  Secret Key
                </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="secretKey"
                    type="text"
                    value=""
                  />
                  <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-error-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </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="allEvents"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <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="CHECKOUT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout created
                  </span>
                </label>
              </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="CHECKOUT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout updated
                  </span>
                </label>
              </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="CUSTOMER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </span>
                </label>
              </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="CUSTOMER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer updated
                  </span>
                </label>
              </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="DRAFT_ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order created
                  </span>
                </label>
              </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="DRAFT_ORDER_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order deleted
                  </span>
                </label>
              </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="DRAFT_ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order updated
                  </span>
                </label>
              </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="FULFILLMENT_CANCELED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </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="FULFILLMENT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </span>
                </label>
              </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="INVOICE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice deleted
                  </span>
                </label>
              </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="INVOICE_REQUESTED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice requested
                  </span>
                </label>
              </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="INVOICE_SENT"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice sent
                  </span>
                </label>
              </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="NOTIFY_USER"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User notified
                  </span>
                </label>
              </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="ORDER_CANCELLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </span>
                </label>
              </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="ORDER_CONFIRMED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order confirmed
                  </span>
                </label>
              </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="ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </span>
                </label>
              </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="ORDER_FULFILLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </span>
                </label>
              </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="ORDER_FULLY_PAID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </span>
                </label>
              </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="ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </span>
                </label>
              </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="PAGE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page created
                  </span>
                </label>
              </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="PAGE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page deleted
                  </span>
                </label>
              </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="PAGE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page updated
                  </span>
                </label>
              </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="PAYMENT_AUTHORIZE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Authorize payment
                  </span>
                </label>
              </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="PAYMENT_CAPTURE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Capture payment
                  </span>
                </label>
              </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="PAYMENT_CONFIRM"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Confirm payment
                  </span>
                </label>
              </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="PAYMENT_LIST_GATEWAYS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    List payment gateways
                  </span>
                </label>
              </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="PAYMENT_PROCESS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Process payment
                  </span>
                </label>
              </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="PAYMENT_REFUND"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Refund payment
                  </span>
                </label>
              </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="PAYMENT_VOID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Void payment
                  </span>
                </label>
              </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="PRODUCT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </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="PRODUCT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product deleted
                  </span>
                </label>
              </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="PRODUCT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product updated
                  </span>
                </label>
              </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="PRODUCT_VARIANT_BACK_IN_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant back in stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant created
                  </span>
                </label>
              </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="PRODUCT_VARIANT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant deleted
                  </span>
                </label>
              </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="PRODUCT_VARIANT_OUT_OF_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant out of stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant updated
                  </span>
                </label>
              </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="SALE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale created
                  </span>
                </label>
              </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="SALE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale deleted
                  </span>
                </label>
              </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="SALE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale updated
                  </span>
                </label>
              </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="TRANSLATION_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation created
                  </span>
                </label>
              </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="TRANSLATION_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <input
                      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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Apps / Webhooks / Create webhook 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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Webhook
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General 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"
                >
                  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="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific 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"
                >
                  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"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="secretKey"
                    type="text"
                    value=""
                  />
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </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="allEvents"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <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="CHECKOUT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Checkout created
                  </span>
                </label>
              </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="CHECKOUT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Checkout updated
                  </span>
                </label>
              </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="CUSTOMER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Customer created
                  </span>
                </label>
              </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="CUSTOMER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Customer updated
                  </span>
                </label>
              </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="DRAFT_ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Draft order created
                  </span>
                </label>
              </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="DRAFT_ORDER_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Draft order deleted
                  </span>
                </label>
              </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="DRAFT_ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Draft order updated
                  </span>
                </label>
              </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="FULFILLMENT_CANCELED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </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="FULFILLMENT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </span>
                </label>
              </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="INVOICE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Invoice deleted
                  </span>
                </label>
              </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="INVOICE_REQUESTED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Invoice requested
                  </span>
                </label>
              </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="INVOICE_SENT"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Invoice sent
                  </span>
                </label>
              </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="NOTIFY_USER"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    User notified
                  </span>
                </label>
              </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="ORDER_CANCELLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </span>
                </label>
              </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="ORDER_CONFIRMED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order confirmed
                  </span>
                </label>
              </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="ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order created
                  </span>
                </label>
              </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="ORDER_FULFILLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </span>
                </label>
              </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="ORDER_FULLY_PAID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </span>
                </label>
              </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="ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order updated
                  </span>
                </label>
              </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="PAGE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Page created
                  </span>
                </label>
              </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="PAGE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Page deleted
                  </span>
                </label>
              </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="PAGE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Page updated
                  </span>
                </label>
              </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="PAYMENT_AUTHORIZE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Authorize payment
                  </span>
                </label>
              </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="PAYMENT_CAPTURE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Capture payment
                  </span>
                </label>
              </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="PAYMENT_CONFIRM"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Confirm payment
                  </span>
                </label>
              </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="PAYMENT_LIST_GATEWAYS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    List payment gateways
                  </span>
                </label>
              </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="PAYMENT_PROCESS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Process payment
                  </span>
                </label>
              </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="PAYMENT_REFUND"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Refund payment
                  </span>
                </label>
              </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="PAYMENT_VOID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Void payment
                  </span>
                </label>
              </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="PRODUCT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </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="PRODUCT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product deleted
                  </span>
                </label>
              </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="PRODUCT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product updated
                  </span>
                </label>
              </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="PRODUCT_VARIANT_BACK_IN_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant back in stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant created
                  </span>
                </label>
              </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="PRODUCT_VARIANT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant deleted
                  </span>
                </label>
              </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="PRODUCT_VARIANT_OUT_OF_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant out of stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant updated
                  </span>
                </label>
              </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="SALE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Sale created
                  </span>
                </label>
              </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="SALE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Sale deleted
                  </span>
                </label>
              </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="SALE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Sale updated
                  </span>
                </label>
              </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="TRANSLATION_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Translation created
                  </span>
                </label>
              </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="TRANSLATION_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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>
      </div>
    </div>
  </form>
</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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Webhook Test 2 Details
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General 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"
                >
                  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="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific 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"
                >
                  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"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="secretKey"
                    type="text"
                    value="zxczx_asdas"
                  />
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </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="allEvents"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <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="CHECKOUT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout created
                  </span>
                </label>
              </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="CHECKOUT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout updated
                  </span>
                </label>
              </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="CUSTOMER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </span>
                </label>
              </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="CUSTOMER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer updated
                  </span>
                </label>
              </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="DRAFT_ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order created
                  </span>
                </label>
              </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="DRAFT_ORDER_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order deleted
                  </span>
                </label>
              </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="DRAFT_ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order updated
                  </span>
                </label>
              </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="FULFILLMENT_CANCELED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </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="FULFILLMENT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </span>
                </label>
              </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="INVOICE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice deleted
                  </span>
                </label>
              </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="INVOICE_REQUESTED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice requested
                  </span>
                </label>
              </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="INVOICE_SENT"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice sent
                  </span>
                </label>
              </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="NOTIFY_USER"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User notified
                  </span>
                </label>
              </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="ORDER_CANCELLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </span>
                </label>
              </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="ORDER_CONFIRMED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order confirmed
                  </span>
                </label>
              </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="ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </span>
                </label>
              </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="ORDER_FULFILLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </span>
                </label>
              </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="ORDER_FULLY_PAID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </span>
                </label>
              </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="ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </span>
                </label>
              </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="PAGE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page created
                  </span>
                </label>
              </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="PAGE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page deleted
                  </span>
                </label>
              </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="PAGE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page updated
                  </span>
                </label>
              </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="PAYMENT_AUTHORIZE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Authorize payment
                  </span>
                </label>
              </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="PAYMENT_CAPTURE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Capture payment
                  </span>
                </label>
              </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="PAYMENT_CONFIRM"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Confirm payment
                  </span>
                </label>
              </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="PAYMENT_LIST_GATEWAYS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    List payment gateways
                  </span>
                </label>
              </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="PAYMENT_PROCESS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Process payment
                  </span>
                </label>
              </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="PAYMENT_REFUND"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Refund payment
                  </span>
                </label>
              </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="PAYMENT_VOID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Void payment
                  </span>
                </label>
              </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="PRODUCT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </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="PRODUCT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product deleted
                  </span>
                </label>
              </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="PRODUCT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product updated
                  </span>
                </label>
              </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="PRODUCT_VARIANT_BACK_IN_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant back in stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant created
                  </span>
                </label>
              </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="PRODUCT_VARIANT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant deleted
                  </span>
                </label>
              </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="PRODUCT_VARIANT_OUT_OF_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant out of stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant updated
                  </span>
                </label>
              </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="SALE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale created
                  </span>
                </label>
              </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="SALE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale deleted
                  </span>
                </label>
              </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="SALE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale updated
                  </span>
                </label>
              </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="TRANSLATION_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation created
                  </span>
                </label>
              </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="TRANSLATION_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Webhook Test 2 Details
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General 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"
                >
                  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="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific 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"
                >
                  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"
                >
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="secretKey"
                    type="text"
                    value="zxczx_asdas"
                  />
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </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="allEvents"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <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="CHECKOUT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout created
                  </span>
                </label>
              </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="CHECKOUT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout updated
                  </span>
                </label>
              </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="CUSTOMER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </span>
                </label>
              </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="CUSTOMER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer updated
                  </span>
                </label>
              </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="DRAFT_ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order created
                  </span>
                </label>
              </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="DRAFT_ORDER_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order deleted
                  </span>
                </label>
              </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="DRAFT_ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order updated
                  </span>
                </label>
              </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="FULFILLMENT_CANCELED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </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="FULFILLMENT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </span>
                </label>
              </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="INVOICE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice deleted
                  </span>
                </label>
              </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="INVOICE_REQUESTED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice requested
                  </span>
                </label>
              </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="INVOICE_SENT"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice sent
                  </span>
                </label>
              </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="NOTIFY_USER"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User notified
                  </span>
                </label>
              </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="ORDER_CANCELLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </span>
                </label>
              </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="ORDER_CONFIRMED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order confirmed
                  </span>
                </label>
              </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="ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </span>
                </label>
              </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="ORDER_FULFILLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </span>
                </label>
              </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="ORDER_FULLY_PAID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </span>
                </label>
              </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="ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </span>
                </label>
              </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="PAGE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page created
                  </span>
                </label>
              </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="PAGE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page deleted
                  </span>
                </label>
              </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="PAGE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page updated
                  </span>
                </label>
              </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="PAYMENT_AUTHORIZE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Authorize payment
                  </span>
                </label>
              </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="PAYMENT_CAPTURE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Capture payment
                  </span>
                </label>
              </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="PAYMENT_CONFIRM"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Confirm payment
                  </span>
                </label>
              </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="PAYMENT_LIST_GATEWAYS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    List payment gateways
                  </span>
                </label>
              </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="PAYMENT_PROCESS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Process payment
                  </span>
                </label>
              </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="PAYMENT_REFUND"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Refund payment
                  </span>
                </label>
              </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="PAYMENT_VOID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Void payment
                  </span>
                </label>
              </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="PRODUCT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </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="PRODUCT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product deleted
                  </span>
                </label>
              </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="PRODUCT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product updated
                  </span>
                </label>
              </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="PRODUCT_VARIANT_BACK_IN_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant back in stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant created
                  </span>
                </label>
              </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="PRODUCT_VARIANT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant deleted
                  </span>
                </label>
              </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="PRODUCT_VARIANT_OUT_OF_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant out of stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant updated
                  </span>
                </label>
              </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="SALE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale created
                  </span>
                </label>
              </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="SALE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale deleted
                  </span>
                </label>
              </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="SALE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale updated
                  </span>
                </label>
              </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="TRANSLATION_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation created
                  </span>
                </label>
              </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="TRANSLATION_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          ... Details
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General 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"
                >
                  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="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific 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"
                >
                  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"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="secretKey"
                    type="text"
                    value=""
                  />
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </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="allEvents"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <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="CHECKOUT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Checkout created
                  </span>
                </label>
              </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="CHECKOUT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Checkout updated
                  </span>
                </label>
              </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="CUSTOMER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Customer created
                  </span>
                </label>
              </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="CUSTOMER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Customer updated
                  </span>
                </label>
              </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="DRAFT_ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Draft order created
                  </span>
                </label>
              </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="DRAFT_ORDER_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Draft order deleted
                  </span>
                </label>
              </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="DRAFT_ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Draft order updated
                  </span>
                </label>
              </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="FULFILLMENT_CANCELED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </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="FULFILLMENT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </span>
                </label>
              </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="INVOICE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Invoice deleted
                  </span>
                </label>
              </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="INVOICE_REQUESTED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Invoice requested
                  </span>
                </label>
              </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="INVOICE_SENT"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Invoice sent
                  </span>
                </label>
              </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="NOTIFY_USER"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    User notified
                  </span>
                </label>
              </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="ORDER_CANCELLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </span>
                </label>
              </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="ORDER_CONFIRMED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order confirmed
                  </span>
                </label>
              </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="ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order created
                  </span>
                </label>
              </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="ORDER_FULFILLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </span>
                </label>
              </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="ORDER_FULLY_PAID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </span>
                </label>
              </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="ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Order updated
                  </span>
                </label>
              </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="PAGE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Page created
                  </span>
                </label>
              </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="PAGE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Page deleted
                  </span>
                </label>
              </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="PAGE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Page updated
                  </span>
                </label>
              </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="PAYMENT_AUTHORIZE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Authorize payment
                  </span>
                </label>
              </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="PAYMENT_CAPTURE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Capture payment
                  </span>
                </label>
              </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="PAYMENT_CONFIRM"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Confirm payment
                  </span>
                </label>
              </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="PAYMENT_LIST_GATEWAYS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    List payment gateways
                  </span>
                </label>
              </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="PAYMENT_PROCESS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Process payment
                  </span>
                </label>
              </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="PAYMENT_REFUND"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Refund payment
                  </span>
                </label>
              </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="PAYMENT_VOID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Void payment
                  </span>
                </label>
              </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="PRODUCT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </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="PRODUCT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product deleted
                  </span>
                </label>
              </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="PRODUCT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product updated
                  </span>
                </label>
              </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="PRODUCT_VARIANT_BACK_IN_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant back in stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant created
                  </span>
                </label>
              </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="PRODUCT_VARIANT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant deleted
                  </span>
                </label>
              </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="PRODUCT_VARIANT_OUT_OF_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant out of stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Product variant updated
                  </span>
                </label>
              </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="SALE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Sale created
                  </span>
                </label>
              </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="SALE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Sale deleted
                  </span>
                </label>
              </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="SALE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Sale updated
                  </span>
                </label>
              </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="TRANSLATION_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Translation created
                  </span>
                </label>
              </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="TRANSLATION_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Unnamed Webhook Details
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                General 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"
                >
                  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="MuiTypography-root-id WebhookInfo-title-id MuiTypography-body1-id"
              >
                Webhook specific 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"
                >
                  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"
                >
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="secretKey"
                    type="text"
                    value="zxczx_asdas"
                  />
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Events
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Expand or restrict webhooks permissions to register certain events in Saleor system.
              </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="allEvents"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  All events
                </span>
              </label>
              <hr
                class="Hr-root-id"
              />
              <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="CHECKOUT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout created
                  </span>
                </label>
              </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="CHECKOUT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Checkout updated
                  </span>
                </label>
              </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="CUSTOMER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer created
                  </span>
                </label>
              </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="CUSTOMER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Customer updated
                  </span>
                </label>
              </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="DRAFT_ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order created
                  </span>
                </label>
              </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="DRAFT_ORDER_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order deleted
                  </span>
                </label>
              </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="DRAFT_ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Draft order updated
                  </span>
                </label>
              </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="FULFILLMENT_CANCELED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </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="FULFILLMENT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Fulfillment created
                  </span>
                </label>
              </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="INVOICE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice deleted
                  </span>
                </label>
              </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="INVOICE_REQUESTED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice requested
                  </span>
                </label>
              </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="INVOICE_SENT"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Invoice sent
                  </span>
                </label>
              </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="NOTIFY_USER"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    User notified
                  </span>
                </label>
              </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="ORDER_CANCELLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order cancelled
                  </span>
                </label>
              </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="ORDER_CONFIRMED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order confirmed
                  </span>
                </label>
              </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="ORDER_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order created
                  </span>
                </label>
              </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="ORDER_FULFILLED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fulfilled
                  </span>
                </label>
              </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="ORDER_FULLY_PAID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order fully paid
                  </span>
                </label>
              </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="ORDER_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Order updated
                  </span>
                </label>
              </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="PAGE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page created
                  </span>
                </label>
              </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="PAGE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page deleted
                  </span>
                </label>
              </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="PAGE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Page updated
                  </span>
                </label>
              </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="PAYMENT_AUTHORIZE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Authorize payment
                  </span>
                </label>
              </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="PAYMENT_CAPTURE"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Capture payment
                  </span>
                </label>
              </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="PAYMENT_CONFIRM"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Confirm payment
                  </span>
                </label>
              </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="PAYMENT_LIST_GATEWAYS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    List payment gateways
                  </span>
                </label>
              </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="PAYMENT_PROCESS"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Process payment
                  </span>
                </label>
              </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="PAYMENT_REFUND"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Refund payment
                  </span>
                </label>
              </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="PAYMENT_VOID"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Void payment
                  </span>
                </label>
              </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="PRODUCT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product created
                  </span>
                </label>
              </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="PRODUCT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product deleted
                  </span>
                </label>
              </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="PRODUCT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product updated
                  </span>
                </label>
              </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="PRODUCT_VARIANT_BACK_IN_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant back in stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant created
                  </span>
                </label>
              </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="PRODUCT_VARIANT_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant deleted
                  </span>
                </label>
              </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="PRODUCT_VARIANT_OUT_OF_STOCK"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant out of stock
                  </span>
                </label>
              </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="PRODUCT_VARIANT_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Product variant updated
                  </span>
                </label>
              </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="SALE_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale created
                  </span>
                </label>
              </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="SALE_DELETED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale deleted
                  </span>
                </label>
              </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="SALE_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Sale updated
                  </span>
                </label>
              </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="TRANSLATION_CREATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation created
                  </span>
                </label>
              </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="TRANSLATION_UPDATED"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    Translation updated
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Webhook Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Webhook is active
                </span>
              </label>
            </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Attribute
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignValueButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                        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>
                    </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                        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>
                    </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organization
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id RadioGroupField-root-id"
              >
                <label
                  class="MuiFormLabel-root-id 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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </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
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-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="filterableInDashboard"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </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="availableInGrid"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Author
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignValueButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                        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>
                    </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                        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>
                    </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organization
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </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
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-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="filterableInDashboard"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </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="availableInGrid"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Author
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignValueButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                        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>
                    </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                        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>
                    </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organization
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </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
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-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="filterableInDashboard"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </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="availableInGrid"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignValueButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                        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>
                    </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 MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organization
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </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
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-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="filterableInDashboard"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </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="availableInGrid"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Author
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignValueButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                        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>
                    </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                        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>
                    </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organization
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </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
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-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="filterableInDashboard"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </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="availableInGrid"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Author
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignValueButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                        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>
                    </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organization
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </div>
              <hr
                class="Hr-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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Faceted Navigation
                </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
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-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="filterableInDashboard"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Use in Filtering
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled, you’ll be able to use this attribute to filter products in product list.
                  </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="availableInGrid"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Add to Column Options
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    If enabled this attribute can be used as a column in product table.
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Attributes
      </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="createAttributeButton"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create attribute
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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 in faceted search
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                author
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Author
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                box-size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Box Size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                brand
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Brand
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                candy-box-size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Candy Box Size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                coffee-genre
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Coffee Genre
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                collar
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Collar
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                color
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Color
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                cover
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Cover
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                flavor
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Flavor
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                language
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Language
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="false"
              >
                No
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                publisher
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Publisher
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="slug"
              >
                size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colName-id"
                data-test="name"
              >
                Size
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colVisible-id"
                data-test="visible"
                data-test-visible="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSearchable-id"
                data-test="searchable"
                data-test-searchable="true"
              >
                Yes
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colFaceted-id"
                data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Attributes
      </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="createAttributeButton"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create attribute
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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 in faceted search
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id AttributeList-link-id"
              data-test="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id AttributeList-colSlug-id"
                data-test="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="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="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="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="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Attributes
      </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="createAttributeButton"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create attribute
            </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 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="searchInput"
        >
          <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"
            >
              <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 in faceted search
                  </div>
                </div>
              </th>
            </tr>
          </thead>
          <tfoot
            class="MuiTableFooter-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-footer-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-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="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
            data-shrink="false"
          >
            E-mail 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="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  E-mail Address
                </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"
          >
            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="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>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="LoginCard-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id"
            data-test="submit"
            tabindex="0"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Login
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Forgot password? 
          <a
            class="LoginCard-link-id"
          >
            Use this link to recover it
          </a>
        </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-outlinedSizeLarge-id MuiButton-sizeLarge-id MuiButton-fullWidth-id"
          data-test="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="MuiFormControl-root-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"
          >
            E-mail 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="email"
              disabled=""
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  E-mail Address
                </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"
          >
            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="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>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="LoginCard-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test="submit"
            disabled=""
            tabindex="-1"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Login
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Forgot password? 
          <a
            class="LoginCard-link-id"
          >
            Use this link to recover it
          </a>
        </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-outlinedSizeLarge-id MuiButton-sizeLarge-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
          data-test="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 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="LoginCard-panel-id"
          data-test="loginErrorMessage"
        >
          <div
            class="MuiTypography-root-id MuiTypography-caption-id"
          >
            Sorry, your username and/or password are incorrect. Please try again.
          </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"
          >
            E-mail 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="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  E-mail Address
                </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"
          >
            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="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>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="LoginCard-buttonContainer-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id LoginCard-loginButton-id MuiButton-containedPrimary-id"
            data-test="submit"
            tabindex="0"
            type="submit"
          >
            <span
              class="MuiButton-label-id"
            >
              Login
            </span>
          </button>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Forgot password? 
          <a
            class="LoginCard-link-id"
          >
            Use this link to recover it
          </a>
        </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-outlinedSizeLarge-id MuiButton-sizeLarge-id MuiButton-fullWidth-id"
          data-test="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="LoginCard-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>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Forgot your password? Don't worry, we'll reset it for you.
        </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"
          >
            E-mail 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="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  E-mail Address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Send Instructions
          </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>
        <div
          class="ResetPasswordPage-panel-id"
        >
          <div
            class="MuiTypography-root-id ResetPasswordPage-errorText-id MuiTypography-caption-id"
          >
            Generic form error
          </div>
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Forgot your password? Don't worry, we'll reset it for you.
        </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"
          >
            E-mail 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="email"
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  E-mail Address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id"
          tabindex="0"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Send Instructions
          </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>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Forgot your password? Don't worry, we'll reset it for you.
        </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"
          >
            E-mail 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="email"
              disabled=""
              name="email"
              type="text"
              value=""
            />
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id"
              >
                <span>
                  E-mail Address
                </span>
              </legend>
            </fieldset>
          </div>
        </div>
        <div
          class="FormSpacer-spacer-id"
        />
        <button
          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ResetPasswordPage-submit-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
          disabled=""
          tabindex="-1"
          type="submit"
        >
          <span
            class="MuiButton-label-id"
          >
            Send Instructions
          </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 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 ResetPasswordSuccessPage-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 MuiTypography-body1-id"
        >
          Please set up a new password.
        </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="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="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 NewPasswordPage-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 MuiTypography-body1-id"
        >
          Please set up a new password.
        </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="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="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 NewPasswordPage-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="NewPasswordPage-panel-id"
        >
          <div
            class="MuiTypography-root-id NewPasswordPage-errorText-id MuiTypography-caption-id"
          >
            This password is too short
          </div>
        </div>
        <div
          class="MuiTypography-root-id MuiTypography-body1-id"
        >
          Please set up a new password.
        </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="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="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 NewPasswordPage-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Categories
      </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="createCategory"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create category
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Categories
      </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="createCategory"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create category
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="4"
              >
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Categories
      </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="createCategory"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create category
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id"
              data-test="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Category
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="richTextEditor"
              data-test-id="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>
              <div
                class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
              />
              <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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Search Engine Preview
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="edit-seo"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit website SEO
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Category
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="richTextEditor"
              data-test-id="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>
              <div
                class="RichTextEditor-editor-id RichTextEditor-root-id"
              />
              <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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Search Engine Preview
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="edit-seo"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit website SEO
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Category
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="richTextEditor"
              data-test-id="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>
              <div
                class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootError-id"
              />
              <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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Search Engine Preview
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="edit-seo"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit website SEO
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            General Information
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id"
            />
            <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="false"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="Metadata-togglable-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              1 Field
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id"
              data-test="expand"
              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
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-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"
              data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test="deleteField"
                  data-test-id="0"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="true"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Private Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            There is no private metadata created for this element.
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Use the button below to add new metadata field
          </div>
        </div>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="productsTab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="createSubcategory"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-back"
                        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
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="4"
                >
                  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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            General Information
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootError-id"
            />
            <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="false"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="Metadata-togglable-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              1 Field
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id"
              data-test="expand"
              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
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-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"
              data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test="deleteField"
                  data-test-id="0"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="true"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Private Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            There is no private metadata created for this element.
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Use the button below to add new metadata field
          </div>
        </div>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="productsTab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="createSubcategory"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-back"
                        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
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="4"
                >
                  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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            General Information
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
            />
            <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="false"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="true"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Private Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="productsTab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="createSubcategory"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-id"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id CategoryList-tableRow-id"
                data-test="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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
                  data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            General Information
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id"
            />
            <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-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
                d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                fill="url(#paint0_linear)"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="3"
                  x2="22.8"
                  y1="3"
                  y2="23.5714"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="false"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="Metadata-togglable-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              1 Field
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id"
              data-test="expand"
              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
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-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"
              data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test="deleteField"
                  data-test-id="0"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="true"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Private Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            There is no private metadata created for this element.
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Use the button below to add new metadata field
          </div>
        </div>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="productsTab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="createSubcategory"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-back"
                        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
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="4"
                >
                  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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            General Information
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id"
            />
            <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="false"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="Metadata-togglable-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              1 Field
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id"
              data-test="expand"
              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
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-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"
              data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test="deleteField"
                  data-test-id="0"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="true"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Private Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            There is no private metadata created for this element.
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Use the button below to add new metadata field
          </div>
        </div>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="productsTab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Products in Coffees
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <div
              class="CategoryProducts-toolbar-id"
            >
              <a
                class="InternalLink-root-id"
                href="/products/?categories%5B%5D=Q2F0ZWdvcnk6NA%3D%3D"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="viewProducts"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View products
                  </span>
                </button>
              </a>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="addProducts"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add product
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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"
                >
                  <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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="2"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-test="button-pagination-back"
                          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
                                d="M14 7l-5 5 5 5V7z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-test="button-pagination-next"
                          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
                                d="M10 17l5-5-5-5v10z"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            General Information
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id"
            />
            <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="false"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="Metadata-togglable-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              1 Field
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id"
              data-test="expand"
              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
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-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"
              data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test="deleteField"
                  data-test-id="0"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="true"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Private Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            There is no private metadata created for this element.
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Use the button below to add new metadata field
          </div>
        </div>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="productsTab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="createSubcategory"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="ResponsiveTable-root-id"
        >
          <table
            class="MuiTable-root-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="4"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-back"
                        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
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="4"
                >
                  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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Coffees
        </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            General Information
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="richTextEditor"
            data-test-id="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>
            <div
              class="RichTextEditor-editor-id RichTextEditor-root-id"
            />
            <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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Background Image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MediaTile-mediaContainer-id"
            data-test="product-image"
          >
            <div
              class="MediaTile-mediaOverlay-id"
            >
              <div
                class="MediaTile-mediaOverlayToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test-id="edit-seo"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit website SEO
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="false"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        >
          <div
            class="Metadata-togglable-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              1 Field
            </div>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id"
              data-test="expand"
              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
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
        <table
          class="MuiTable-root-id Metadata-table-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-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"
              data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test="deleteField"
                  data-test-id="0"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
              </td>
            </tr>
          </tbody>
        </table>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="metadataEditor"
        data-test-expanded="true"
        data-test-is-private="true"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Private Metadata
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id Metadata-content-id"
        />
        <div
          class="Metadata-emptyContainer-id"
        >
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            There is no private metadata created for this element.
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
          >
            Use the button below to add new metadata field
          </div>
        </div>
        <div
          class="MuiCardActions-root-id MuiCardActions-spacing-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
            data-test="addField"
            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="productsTab"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Products in Coffees
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <div
              class="CategoryProducts-toolbar-id"
            >
              <a
                class="InternalLink-root-id"
                href="/products/?categories%5B%5D=Q2F0ZWdvcnk6NA%3D%3D"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="viewProducts"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View products
                  </span>
                </button>
              </a>
              <div
                class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
              />
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="addProducts"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add product
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="2"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-test="button-pagination-back"
                          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
                                d="M14 7l-5 5 5 5V7z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-test="button-pagination-next"
                          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
                                d="M10 17l5-5-5-5v10z"
                              />
                            </svg>
                          </span>
                        </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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="productRow"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <span
                      aria-disabled="false"
                      class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-root-id MuiCheckbox-root-id MuiCheckbox-colorPrimary-id MuiIconButton-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                    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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-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
                  aria-autocomplete="list"
                  aria-expanded="false"
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    type="text"
                    value=""
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </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
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-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
                  aria-autocomplete="list"
                  aria-expanded="false"
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    type="text"
                    value=""
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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-text-id ChannelComponents-activeBtn-id MuiButton-textPrimary-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping Zones
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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 MuiExpansionPanel-root-id ShippingZonesCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="ShippingZonesListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ShippingZonesListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiExpansionPanelSummary-content-id ShippingZonesListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 Shipping Zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                        data-test-id="add-shipping-zone-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-shipping-zone-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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
            >
              <div
                class="MuiFormControl-root-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
                  aria-autocomplete="list"
                  aria-expanded="false"
                  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"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    type="text"
                    value=""
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </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
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
            >
              <div
                class="MuiFormControl-root-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
                  aria-autocomplete="list"
                  aria-expanded="false"
                  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"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    type="text"
                    value=""
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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-text-id ChannelComponents-activeBtn-id MuiButton-textPrimary-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping Zones
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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 MuiExpansionPanel-root-id ShippingZonesCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="ShippingZonesListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ShippingZonesListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiExpansionPanelSummary-content-id ShippingZonesListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 Shipping Zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                        data-test-id="add-shipping-zone-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-shipping-zone-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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-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
                  aria-autocomplete="list"
                  aria-expanded="false"
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    type="text"
                    value=""
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </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
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-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
                  aria-autocomplete="list"
                  aria-expanded="false"
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    type="text"
                    value=""
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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-text-id ChannelComponents-activeBtn-id MuiButton-textPrimary-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping Zones
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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 MuiExpansionPanel-root-id ShippingZonesCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="ShippingZonesListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ShippingZonesListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiExpansionPanelSummary-content-id ShippingZonesListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 Shipping Zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                        data-test-id="add-shipping-zone-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-shipping-zone-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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
              >
                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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-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
                  aria-autocomplete="list"
                  aria-expanded="false"
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    type="text"
                    value=""
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </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
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id 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 country
                </label>
                <div
                  aria-autocomplete="list"
                  aria-expanded="false"
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    type="text"
                    value="Poland"
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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-text-id ChannelComponents-activeBtn-id MuiButton-textPrimary-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping Zones
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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 MuiExpansionPanel-root-id ShippingZonesCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="ShippingZonesListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ShippingZonesListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiExpansionPanelSummary-content-id ShippingZonesListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 Shipping Zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                        data-test-id="add-shipping-zone-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-shipping-zone-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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-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-testid="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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="channel-currency-select-input"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-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
                  aria-autocomplete="list"
                  aria-expanded="false"
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    type="text"
                    value=""
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </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
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-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
                  aria-autocomplete="list"
                  aria-expanded="false"
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    type="text"
                    value=""
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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-text-id ChannelComponents-activeBtn-id MuiButton-textPrimary-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping Zones
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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 MuiExpansionPanel-root-id ShippingZonesCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="ShippingZonesListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ShippingZonesListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiExpansionPanelSummary-content-id ShippingZonesListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 Shipping Zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                        data-test-id="add-shipping-zone-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-shipping-zone-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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
              >
                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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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
              class="SingleAutocompleteSelectField-container-id"
              data-test-id="country-select-input"
            >
              <div
                class="MuiFormControl-root-id MuiTextField-root-id 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 country
                </label>
                <div
                  aria-autocomplete="list"
                  aria-expanded="false"
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                  role="combobox"
                >
                  <input
                    aria-invalid="false"
                    autocomplete="off"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    type="text"
                    value="Poland"
                  />
                  <div
                    class="SingleAutocompleteSelectField-adornment-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <g
                        style="fill-rule:evenodd"
                      >
                        <path
                          d="M7 10l5 5 5-5z"
                        />
                      </g>
                    </svg>
                  </div>
                  <fieldset
                    aria-hidden="true"
                    class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  >
                    <legend
                      class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Channel Status
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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-text-id ChannelComponents-activeBtn-id MuiButton-textPrimary-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping Zones
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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 MuiExpansionPanel-root-id ShippingZonesCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
          >
            <div
              class="ShippingZonesListHeader-container-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ShippingZonesListHeader-root-id"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiExpansionPanelSummary-content-id ShippingZonesListHeader-content-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-subtitle2-id MuiTypography-colorTextSecondary-id"
                  >
                    2 Shipping Zones
                  </div>
                </div>
                <div
                  aria-disabled="false"
                  aria-hidden="true"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-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="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Europe
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="ShippingZoneItem-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        USA
                      </div>
                      <div
                        class="DeletableItem-container-id"
                      >
                        <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>
                      </div>
                    </div>
                    <hr
                      class="MuiDivider-root-id"
                    />
                    <div
                      class="CardAddItemsFooter-container-id"
                    >
                      <a
                        class="MuiTypography-root-id Link-root-id Link-primary-id MuiTypography-body1-id"
                        data-test-id="add-shipping-zone-link"
                      >
                        Add Shipping Zones
                      </a>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-shipping-zone-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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        General Information
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-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"
        >
          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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Channel Settings
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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
        class="SingleAutocompleteSelectField-container-id"
        data-test-id="country-select-input"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id 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 country
          </label>
          <div
            aria-autocomplete="list"
            aria-expanded="false"
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            role="combobox"
          >
            <input
              aria-invalid="false"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              type="text"
              value="Poland"
            />
            <div
              class="SingleAutocompleteSelectField-adornment-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        General Information
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-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-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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Channel Settings
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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
        class="SingleAutocompleteSelectField-container-id"
        data-test-id="country-select-input"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id 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"
          >
            Default country
          </label>
          <div
            aria-autocomplete="list"
            aria-expanded="false"
            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"
            role="combobox"
          >
            <input
              aria-invalid="false"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              disabled=""
              type="text"
              value="Poland"
            />
            <div
              class="SingleAutocompleteSelectField-adornment-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        General Information
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-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"
        >
          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-testid="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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Channel Settings
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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
        class="SingleAutocompleteSelectField-container-id"
        data-test-id="country-select-input"
      >
        <div
          class="MuiFormControl-root-id MuiTextField-root-id 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 country
          </label>
          <div
            aria-autocomplete="list"
            aria-expanded="false"
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
            role="combobox"
          >
            <input
              aria-invalid="false"
              autocomplete="off"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              type="text"
              value="Poland"
            />
            <div
              class="SingleAutocompleteSelectField-adornment-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </svg>
            </div>
            <fieldset
              aria-hidden="true"
              class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            >
              <legend
                class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Channel Status
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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-text-id ChannelComponents-activeBtn-id MuiButton-textPrimary-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="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
      >
        Channel Status
      </span>
      <div
        class="CardTitle-toolbar-id"
      />
    </div>
    <div
      class="CardTitle-children-id"
    />
    <hr
      class="CardTitle-hr-id"
    />
    <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-text-id ChannelComponents-activeBtn-id MuiButton-textPrimary-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Channels
      </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>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test="add-channel"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Channel
            </span>
          </button>
        </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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-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="name"
                >
                  Test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Channels
      </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>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test="add-channel"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Channel
            </span>
          </button>
        </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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-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"
            >
              <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Channels
      </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>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test="add-channel"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Channel
            </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 />
          <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 MuiIconButton-root-id Alert-close-id Alert-closeNoContent-id"
                data-test="close"
                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
                      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>
                </span>
              </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"
      >
        <table
          class="MuiTable-root-id"
        >
          <thead
            class="MuiTableHead-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-head-id"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-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="name"
                >
                  Test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Channels
      </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="add-channel"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Channel
            </span>
          </button>
        </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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-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="name"
                >
                  Test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel test
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="name"
                >
                  Channel USD
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ChannelsListPage-colAction-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Summer collection
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MediaTile-mediaContainer-id"
                data-test="product-image"
              >
                <div
                  class="MediaTile-mediaOverlay-id"
                >
                  <div
                    class="MediaTile-mediaOverlayToolbar-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Products in Summer collection
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="add-product"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="5"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                            data-test="button-pagination-next"
                            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
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                2/2 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                2/2 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                2/2 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                2/2 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Availability
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                  data-test="channel-availability-item"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                                >
                                  <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"
                                      />
                                      <div
                                        class="PrivateRadioButtonIcon-root-id"
                                      >
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                          />
                                        </svg>
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                          />
                                        </svg>
                                      </div>
                                    </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"
                                >
                                  <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"
                                      />
                                      <div
                                        class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                      >
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                          />
                                        </svg>
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                          />
                                        </svg>
                                      </div>
                                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Summer collection
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootError-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MediaTile-mediaContainer-id"
                data-test="product-image"
              >
                <div
                  class="MediaTile-mediaOverlay-id"
                >
                  <div
                    class="MediaTile-mediaOverlayToolbar-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Products in Summer collection
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="add-product"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign product
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="5"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                            data-test="button-pagination-next"
                            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
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                2/2 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                2/2 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                2/2 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                2/2 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Availability
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                  data-test="channel-availability-item"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                                >
                                  <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"
                                      />
                                      <div
                                        class="PrivateRadioButtonIcon-root-id"
                                      >
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                          />
                                        </svg>
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                          />
                                        </svg>
                                      </div>
                                    </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"
                                >
                                  <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"
                                      />
                                      <div
                                        class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                      >
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                          />
                                        </svg>
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                          />
                                        </svg>
                                      </div>
                                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="5"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                            data-test="button-pagination-next"
                            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
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                    >
                      <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
                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Availability
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                  data-test="channel-availability-item"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                                >
                                  <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"
                                      />
                                      <div
                                        class="PrivateRadioButtonIcon-root-id"
                                      >
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                          />
                                        </svg>
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                          />
                                        </svg>
                                      </div>
                                    </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"
                                >
                                  <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"
                                      />
                                      <div
                                        class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                      >
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                          />
                                        </svg>
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                          />
                                        </svg>
                                      </div>
                                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Summer collection
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  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="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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MediaTile-mediaContainer-id"
                data-test="product-image"
              >
                <div
                  class="MediaTile-mediaOverlay-id"
                >
                  <div
                    class="MediaTile-mediaOverlayToolbar-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Products in Summer collection
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="5"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                            data-test="button-pagination-next"
                            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
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </button>
                        </div>
                      </div>
                    </td>
                  </tr>
                </tfoot>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                    />
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="5"
                    >
                      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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
                >
                  Availability
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                  data-test="channel-availability-item"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                                >
                                  <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"
                                      />
                                      <div
                                        class="PrivateRadioButtonIcon-root-id"
                                      >
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                          />
                                        </svg>
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                          />
                                        </svg>
                                      </div>
                                    </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"
                                >
                                  <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"
                                      />
                                      <div
                                        class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                      >
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                          />
                                        </svg>
                                        <svg
                                          aria-hidden="true"
                                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                          focusable="false"
                                          viewBox="0 0 24 24"
                                        >
                                          <path
                                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                          />
                                        </svg>
                                      </div>
                                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Collections
      </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="create-collection"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create collection
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test="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"
                data-test-availability="true"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpublished
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test="id"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test="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"
                data-test-availability="true"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="StatusLabel-container-id"
                    >
                      <div
                        class="undefined StatusLabel-errorDot-id"
                      />
                      <div
                        class="StatusLabel-textContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1/2 channels
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test="id"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test="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"
                data-test-availability="true"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="StatusLabel-container-id"
                    >
                      <div
                        class="undefined StatusLabel-errorDot-id"
                      />
                      <div
                        class="StatusLabel-textContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1/2 channels
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test="id"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test="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"
                data-test-availability="true"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="StatusLabel-container-id"
                    >
                      <div
                        class="undefined StatusLabel-errorDot-id"
                      />
                      <div
                        class="StatusLabel-textContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1/2 channels
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test="id"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test="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"
                data-test-availability="true"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="StatusLabel-container-id"
                    >
                      <div
                        class="undefined StatusLabel-errorDot-id"
                      />
                      <div
                        class="StatusLabel-textContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1/2 channels
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id MuiTableRow-hover-id"
              data-test="id"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test="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"
                data-test-availability="true"
              >
                <div>
                  <div
                    aria-controls="availability-menu"
                    aria-haspopup="true"
                    role="button"
                  >
                    <div
                      class="StatusLabel-container-id"
                    >
                      <div
                        class="undefined StatusLabel-errorDot-id"
                      />
                      <div
                        class="StatusLabel-textContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1/2 channels
                        </div>
                      </div>
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Collections
      </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 MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="create-collection"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create collection
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id CollectionList-tableRow-id"
              data-test="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
                data-test="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"
                data-test-availability="false"
              >
                <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Collections
      </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="create-collection"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create collection
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add Collection
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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
                    d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                    fill="url(#paint0_linear)"
                  />
                  <defs>
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear"
                      x1="3"
                      x2="22.8"
                      y1="3"
                      y2="23.5714"
                    >
                      <stop
                        stop-color="#06847B"
                      />
                      <stop
                        offset="1"
                        stop-color="#3EE7CD"
                      />
                    </linearGradient>
                  </defs>
                </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add Collection
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootError-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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
                    d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                    fill="url(#paint0_linear)"
                  />
                  <defs>
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear"
                      x1="3"
                      x2="22.8"
                      y1="3"
                      y2="23.5714"
                    >
                      <stop
                        stop-color="#06847B"
                      />
                      <stop
                        offset="1"
                        stop-color="#3EE7CD"
                      />
                    </linearGradient>
                  </defs>
                </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add Collection
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Background Image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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
                    d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                    fill="url(#paint0_linear)"
                  />
                  <defs>
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear"
                      x1="3"
                      x2="22.8"
                      y1="3"
                      y2="23.5714"
                    >
                      <stop
                        stop-color="#06847B"
                      />
                      <stop
                        offset="1"
                        stop-color="#3EE7CD"
                      />
                    </linearGradient>
                  </defs>
                </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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 MuiExpansionPanel-root-id ChannelContentWrapperExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
                data-test="channel-availability-item"
              >
                <div
                  aria-disabled="false"
                  aria-expanded="false"
                  class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id ChannelContentWrapperExpanderSummary-root-id"
                  role="button"
                  tabindex="0"
                >
                  <div
                    class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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"
                              >
                                <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"
                                    />
                                    <div
                                      class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                                    >
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                                        />
                                      </svg>
                                      <svg
                                        aria-hidden="true"
                                        class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                                        focusable="false"
                                        viewBox="0 0 24 24"
                                      >
                                        <path
                                          d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                                        />
                                      </svg>
                                    </div>
                                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Configuration
      </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"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuAttributes"
          data-testid="attributes"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M37.9487 10.4808C37.9487 14.4459 34.7343 17.6603 30.7692 17.6603C26.8041 17.6603 23.5897 14.4459 23.5897 10.4808C23.5897 6.51565 26.8041 3.30128 30.7692 3.30128C34.7343 3.30128 37.9487 6.51565 37.9487 10.4808ZM40 10.4808C40 15.5788 35.8672 19.7115 30.7692 19.7115C25.6712 19.7115 21.5385 15.5788 21.5385 10.4808C21.5385 5.38275 25.6712 1.25 30.7692 1.25C35.8672 1.25 40 5.38275 40 10.4808ZM16.4103 9.45484H2.05128V23.8138H16.4103V9.45484ZM0 7.40356V25.8651H18.4615V7.40356H0ZM24.6154 20.7371L13.9566 39.1987H35.2741L24.6154 20.7371ZM24.6154 24.8397L17.5095 37.1474H31.7212L24.6154 24.8397Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Attributes
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Determine attributes used to create product types
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuProductTypes"
          data-testid="product types"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-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="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Product Types
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Define types of products you sell
              </div>
            </div>
          </div>
        </div>
      </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"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuTaxes"
          data-testid="taxes"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M2 0H34.6316V21.0526H32.5263V2.10526H4.10526V37.8947H32.5263V35.2632H34.6316V40H2V0ZM8.31579 20H11.4737V23.1579H8.31579V20ZM16.7368 20H13.5789V23.1579H16.7368V20ZM18.8421 20H22V23.1579H18.8421V20ZM27.2632 20H24.1053V23.1579H27.2632V20ZM8.31579 25.2632H11.4737V28.4211H8.31579V25.2632ZM16.7368 25.2632H13.5789V28.4211H16.7368V25.2632ZM18.8421 25.2632H22V28.4211H18.8421V25.2632ZM11.4737 30.5263H8.31579V33.6842H11.4737V30.5263ZM13.5789 30.5263H16.7368V33.6842H13.5789V30.5263ZM22 30.5263H18.8421V33.6842H22V30.5263ZM26.2105 9.47368H10.4211V14.7368H26.2105V9.47368ZM8.31579 7.36842V16.8421H28.3158V7.36842H8.31579ZM37.7895 30.5263H34.6316V33.6842H37.7895V30.5263ZM28.3158 24.2105H31.4737V27.3684H28.3158V24.2105ZM29.0602 34.4285L38.5339 24.9548L37.0452 23.4662L27.5715 32.9398L29.0602 34.4285Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Taxes
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage how your store charges tax
              </div>
            </div>
          </div>
        </div>
      </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"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuStaff"
          data-testid="staff members"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M20 8C20 11.3137 17.3137 14 14 14C10.6863 14 8 11.3137 8 8C8 4.68629 10.6863 2 14 2C17.3137 2 20 4.68629 20 8ZM22 8C22 12.4183 18.4183 16 14 16C9.58172 16 6 12.4183 6 8C6 3.58172 9.58172 0 14 0C18.4183 0 22 3.58172 22 8ZM2.31344 38L4.94331 20H22.0567L23.0395 26.7268L23 27H23.0794L24.6866 38H2.31344ZM25.1006 27L27 40H0L3.21429 18H23.7857L24.0447 19.7729L25.0238 13H31.5H37.9762L40 27H25.1006ZM31.5 13C28.4624 13 26 10.5376 26 7.5C26 4.46243 28.4624 2 31.5 2C34.5376 2 37 4.46243 37 7.5C37 10.5376 34.5376 13 31.5 13ZM31.5 11C33.433 11 35 9.433 35 7.5C35 5.567 33.433 4 31.5 4C29.567 4 28 5.567 28 7.5C28 9.433 29.567 11 31.5 11ZM25.3099 25L26.7555 15H36.2445L37.6901 25H25.3099Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Staff Members
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage your employees and their permissions
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuPermissionGroups"
          data-testid="permission groups"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M0 0H22.7652L30.4497 7.70511V16.7623C32.4381 16.9409 33.8497 17.6711 34.6541 18.9799C35.5326 20.4092 35.4932 22.2483 35.212 23.9721C34.9657 25.4823 34.4931 27.1133 34.0547 28.6263C33.9837 28.8716 33.9135 29.1138 33.8454 29.3518C33.4479 30.7401 33.1267 31.9645 33.0062 32.9688H40V40H20H18.8281H0V0ZM31.8926 28.7927C31.4864 30.2113 31.089 31.679 30.964 32.9688H27.982C27.8555 31.6772 27.4528 30.2082 27.0405 28.7889C26.9647 28.5282 26.8882 28.2678 26.8119 28.0082L26.811 28.0052L26.8106 28.0036C26.3664 26.4922 25.9303 25.0083 25.699 23.6394C25.4224 22.0022 25.4937 20.8052 25.9593 20.0393C26.3673 19.3682 27.2649 18.75 29.434 18.75C31.6024 18.75 32.5084 19.3679 32.9236 20.0435C33.3956 20.8115 33.4741 22.0095 33.2073 23.6451C32.9824 25.0238 32.5494 26.5201 32.1087 28.0431L32.1086 28.0434C32.0365 28.2926 31.9642 28.5425 31.8926 28.7927ZM25.0899 29.3556C25.4929 30.743 25.8176 31.9661 25.9395 32.9688H18.8281V37.9688H2.03125V2.03125H21.3281V9.14062H28.4184V16.7623C26.4311 16.941 25.0216 17.6715 24.2236 18.9841C23.3534 20.4155 23.4052 22.2556 23.6961 23.9778C23.9494 25.4766 24.4257 27.0953 24.8681 28.5988L24.8681 28.5988C24.9434 28.8548 25.0178 29.1075 25.0899 29.3556ZM23.3594 3.47223L26.9868 7.10938H23.3594V3.47223ZM14.0625 16.4844H4.6875V14.4531H14.0625V16.4844ZM18.5938 21.25H4.76562V19.2188H18.5938V21.25ZM37.9688 35V37.9688H20.8594V35H37.9688ZM10 31.6406C10 32.5467 9.26547 33.2812 8.35938 33.2812C7.45328 33.2812 6.71875 32.5467 6.71875 31.6406C6.71875 30.7345 7.45328 30 8.35938 30C9.26547 30 10 30.7345 10 31.6406ZM12.0312 31.6406C12.0312 33.6685 10.3873 35.3125 8.35938 35.3125C6.33145 35.3125 4.6875 33.6685 4.6875 31.6406C4.6875 29.6127 6.33145 27.9688 8.35938 27.9688C10.3873 27.9688 12.0312 29.6127 12.0312 31.6406Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Permission Groups
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage your permission groups and their permissions
              </div>
            </div>
          </div>
        </div>
      </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"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuShipping"
          data-testid="shipping methods"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M0 0H29.3333V12.2666H40V32.9751L32.9752 40H7.4667V19.8248L9.15816 18.1333H0V0ZM27.2 3.35694V12.2666H15.0249L11.2915 16H2.13333V3.07966L14.9333 9.73563L27.2 3.35694ZM24.929 2.13333H4.93756L14.9333 7.33111L24.929 2.13333ZM12.2667 18.1333H12.1752L11.1085 19.2H31.5582L36.3582 14.4H15.9085L12.2667 18.0418V18.1333ZM32.5334 21.2418L37.8667 15.9085V32.0915L32.5334 37.4248V21.2418ZM9.60003 21.3333V37.8666H30.4V21.3333H9.60003ZM18.6667 30.9333H26.6667V28.8H18.6667V30.9333ZM18.6667 34.6666H25.0667V32.5333H18.6667V34.6666Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Shipping Methods
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage how you ship out orders
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuWarehouses"
          data-testid="warehouses"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M5.23438 15.2344H34.7656V38.4375H38.2812V12.3121L19.9219 1.80048L1.5625 12.3121V38.4375H5.23438V15.2344ZM6.79688 40H0V11.4062L19.9219 0L39.8438 11.4062V40H33.2031V16.7969H6.79688V40ZM23.8281 9.84375H16.1719V11.7188H23.8281V9.84375ZM14.6094 8.28125V13.2812H25.3906V8.28125H14.6094ZM15.8594 32.3438H21.6406V38.4375H15.8594V32.3438ZM21.6406 30.7812V23.125H30.5469V30.7812V32.3438V40H23.2031H21.6406H14.2969V30.7812H21.6406ZM28.9844 32.3438H23.2031V38.4375H28.9844V32.3438ZM28.9844 30.7812V24.6875H23.2031V30.7812H28.9844Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Warehouses
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage and update your warehouse information
              </div>
            </div>
          </div>
        </div>
      </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"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuPageTypes"
          data-testid="page types"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M19 0H0V40H26.4056H27.6667V8L19 0ZM25.1445 9.00369V37.5769H2.52221V2.42311H17.9553L18 2.46406V9H25.1404L25.1445 9.00369ZM5 12H23V17H5V12ZM12 20H5V30H12V20ZM15 20H23V35H15V20ZM12 33H5V35H12V33Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Page Types
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Define types of content pages used in your store
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuPages"
          data-testid="pages"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M18.179 1.20349H32.8068L40 8.39671V34.0421H24.6825V32.0528H38.0107V9.2207L37.79 9H32V3.20999L31.9828 3.19278H20.1683V7.15606H18.179V1.20349ZM0 6.16142H14.6278L21.821 13.3546V39H20.8264H0V6.16142ZM14 8.34692V15H19.8317V37.0107H1.98929V8.15071H13.8038L14 8.34692ZM18 19H4V22H18V19ZM4 24H18V27H4V24ZM35 12H25V15H35V12ZM25 17H35V28H25V17ZM18 29H4V32H18V29Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Pages
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage and add additional pages
              </div>
            </div>
          </div>
        </div>
      </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"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuNavigation"
          data-testid="navigation"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M35.9075 11.3232C40.8772 19.931 37.928 30.9378 29.3202 35.9075C20.7123 40.8772 9.70553 37.928 4.7358 29.3201C-0.233933 20.7123 2.71533 9.70553 11.3232 4.7358C19.931 -0.233933 30.9378 2.71533 35.9075 11.3232ZM37.6393 10.3233C43.1612 19.8876 39.8842 32.1173 30.32 37.6393C20.7557 43.1612 8.52596 39.8842 3.00404 30.32C-2.51789 20.7557 0.759069 8.52596 10.3233 3.00404C19.8876 -2.51789 32.1173 0.759069 37.6393 10.3233ZM14.9402 14.5709L31.0335 9.60975L26.0724 25.7031L21.7789 21.4096C22.3117 20.6975 22.2544 19.6836 21.6072 19.0364C20.9599 18.3891 19.946 18.3319 19.2339 18.8647L14.9402 14.5709ZM19.0359 21.6077C18.3884 20.9602 18.3314 19.946 18.8646 19.2338L14.571 14.9402L9.6098 31.0335L25.7032 26.0723L21.4097 21.7789C20.6976 22.3122 19.6833 22.2551 19.0359 21.6077ZM18.7012 15.504L28.0085 12.6348L25.1393 21.9421L18.7012 15.504Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Navigation
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Define how users can navigate through your store
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuSiteSettings"
          data-testid="site settings"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M31.8208 5.55248L30.7926 8.35093L31.545 9.18475C33.147 10.9601 34.3637 13.1054 35.0581 15.4817L35.3837 16.596L38.1395 17.0712V23.1349L35.3838 23.6101L35.0582 24.7244C34.4073 26.9518 33.2976 28.9763 31.8417 30.6834L31.1357 31.5111L32.2146 34.4475L26.7281 37.6084L24.9142 35.4411L23.7814 35.7276C22.572 36.0334 21.3058 36.1961 20 36.1961C18.6942 36.1961 17.428 36.0334 16.2186 35.7276L15.0858 35.4411L13.2719 37.6084L7.78535 34.4475L8.86424 31.5111L8.15831 30.6834C6.70243 28.9763 5.59267 26.9518 4.94182 24.7244L4.61622 23.6101L1.86047 23.1349L1.86047 17.0712L4.61625 16.596L4.94186 15.4817C5.63625 13.1054 6.85296 10.9601 8.45495 9.18475L9.20736 8.35093L8.17916 5.55248L13.6657 2.39164L15.5348 4.62486L16.6397 4.37851C17.7208 4.1375 18.8448 4.01018 20 4.01018C21.1552 4.01018 22.2792 4.1375 23.3603 4.37851L24.4652 4.62486L26.3343 2.39164L31.8208 5.55248ZM40 24.702V15.5042L36.8439 14.9599C36.0699 12.311 34.7134 9.91885 32.9263 7.93836L34.1077 4.72285L25.9098 0L23.7651 2.56262C22.5521 2.2922 21.2924 2.14972 20 2.14972C18.7076 2.14972 17.4479 2.2922 16.2349 2.56262L14.0902 0L5.89227 4.72285L7.07371 7.93836C5.28657 9.91885 3.93009 12.311 3.15607 14.9599L0 15.5042V24.702L3.15603 25.2462C3.88152 27.7291 5.11876 29.9864 6.74273 31.8906L5.49846 35.2772L13.6964 40L15.7625 37.5313C17.1197 37.8744 18.539 38.0565 20 38.0565C21.461 38.0565 22.8803 37.8744 24.2375 37.5313L26.3036 40L34.5015 35.2772L33.2573 31.8906C34.8812 29.9864 36.1185 27.7291 36.844 25.2462L40 24.702ZM28.4425 20C28.4425 24.6627 24.6627 28.4425 20 28.4425C15.3373 28.4425 11.5574 24.6627 11.5574 20C11.5574 15.3373 15.3373 11.5574 20 11.5574C24.6627 11.5574 28.4425 15.3373 28.4425 20ZM30.303 20C30.303 25.6902 25.6902 30.303 20 30.303C14.3097 30.303 9.69693 25.6902 9.69693 20C9.69693 14.3097 14.3097 9.69693 20 9.69693C25.6902 9.69693 30.303 14.3097 30.303 20Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Site Settings
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                View and update your site settings
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationPluginsPages"
          data-testid="plugins"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-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="#06847B"
                    fill-rule="evenodd"
                  />
                </g>
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Plugins
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                View and update your plugins and their settings.
              </div>
            </div>
          </div>
        </div>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Configuration
      </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"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuAttributes"
          data-testid="attributes"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M37.9487 10.4808C37.9487 14.4459 34.7343 17.6603 30.7692 17.6603C26.8041 17.6603 23.5897 14.4459 23.5897 10.4808C23.5897 6.51565 26.8041 3.30128 30.7692 3.30128C34.7343 3.30128 37.9487 6.51565 37.9487 10.4808ZM40 10.4808C40 15.5788 35.8672 19.7115 30.7692 19.7115C25.6712 19.7115 21.5385 15.5788 21.5385 10.4808C21.5385 5.38275 25.6712 1.25 30.7692 1.25C35.8672 1.25 40 5.38275 40 10.4808ZM16.4103 9.45484H2.05128V23.8138H16.4103V9.45484ZM0 7.40356V25.8651H18.4615V7.40356H0ZM24.6154 20.7371L13.9566 39.1987H35.2741L24.6154 20.7371ZM24.6154 24.8397L17.5095 37.1474H31.7212L24.6154 24.8397Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Attributes
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Determine attributes used to create product types
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuProductTypes"
          data-testid="product types"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-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="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Product Types
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Define types of products you sell
              </div>
            </div>
          </div>
        </div>
      </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"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuWarehouses"
          data-testid="warehouses"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M5.23438 15.2344H34.7656V38.4375H38.2812V12.3121L19.9219 1.80048L1.5625 12.3121V38.4375H5.23438V15.2344ZM6.79688 40H0V11.4062L19.9219 0L39.8438 11.4062V40H33.2031V16.7969H6.79688V40ZM23.8281 9.84375H16.1719V11.7188H23.8281V9.84375ZM14.6094 8.28125V13.2812H25.3906V8.28125H14.6094ZM15.8594 32.3438H21.6406V38.4375H15.8594V32.3438ZM21.6406 30.7812V23.125H30.5469V30.7812V32.3438V40H23.2031H21.6406H14.2969V30.7812H21.6406ZM28.9844 32.3438H23.2031V38.4375H28.9844V32.3438ZM28.9844 30.7812V24.6875H23.2031V30.7812H28.9844Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Warehouses
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage and update your warehouse information
              </div>
            </div>
          </div>
        </div>
      </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"
      >
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuPageTypes"
          data-testid="page types"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M19 0H0V40H26.4056H27.6667V8L19 0ZM25.1445 9.00369V37.5769H2.52221V2.42311H17.9553L18 2.46406V9H25.1404L25.1445 9.00369ZM5 12H23V17H5V12ZM12 20H5V30H12V20ZM15 20H23V35H15V20ZM12 33H5V35H12V33Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Page Types
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Define types of content pages used in your store
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id ConfigurationPage-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          data-test="settingsSubsection"
          data-test-id="configurationMenuPages"
          data-testid="pages"
        >
          <div
            class="MuiCardContent-root-id ConfigurationPage-cardContent-id"
          >
            <div
              class="ConfigurationPage-icon-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                focusable="false"
                viewBox="0 0 44 44"
              >
                <path
                  clip-rule="evenodd"
                  d="M18.179 1.20349H32.8068L40 8.39671V34.0421H24.6825V32.0528H38.0107V9.2207L37.79 9H32V3.20999L31.9828 3.19278H20.1683V7.15606H18.179V1.20349ZM0 6.16142H14.6278L21.821 13.3546V39H20.8264H0V6.16142ZM14 8.34692V15H19.8317V37.0107H1.98929V8.15071H13.8038L14 8.34692ZM18 19H4V22H18V19ZM4 24H18V27H4V24ZM35 12H25V15H35V12ZM25 17H35V28H25V17ZM18 29H4V32H18V29Z"
                  fill="#06847B"
                  fill-rule="evenodd"
                />
              </svg>
            </div>
            <div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionTitle-id MuiTypography-body1-id MuiTypography-colorPrimary-id"
              >
                Pages
              </div>
              <div
                class="MuiTypography-root-id ConfigurationPage-sectionDescription-id MuiTypography-body1-id"
              >
                Manage and add additional pages
              </div>
            </div>
          </div>
        </div>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Tom Cooper's Address Book
      </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"
            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="CardTitle-root-id CardTitle-constantHeight-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Default Address
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="CardTitle-root-id CardTitle-constantHeight-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          />
          <div
            class="CardTitle-toolbar-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        ...'s Address Book
      </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"
            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="CardTitle-root-id CardTitle-constantHeight-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            <span
              class="Skeleton-skeleton-id"
              data-test-id="skeleton"
            >
              ‌
            </span>
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                data-test-id="showMoreButton"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Customer
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer Overview
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    E-mail 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>
                          E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Primary Address
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="given-name"
                        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="family-name"
                        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="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>
                <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="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
                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="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="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>
                <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>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="none"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="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>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Customer
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer Overview
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    E-mail 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>
                          E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Primary Address
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="given-name"
                        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="family-name"
                        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="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>
                <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="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
                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="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="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>
                <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>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                  >
                    <div
                      class="MuiFormControl-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        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"
                        role="combobox"
                      >
                        <input
                          aria-invalid="true"
                          autocomplete="none"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="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>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Customer
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer Overview
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    E-mail 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>
                          E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Primary Address
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="given-name"
                        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="family-name"
                        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="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>
                <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="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
                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="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="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>
                <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>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                  >
                    <div
                      class="MuiFormControl-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        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"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="none"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          disabled=""
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="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>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </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="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Informations
              </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"
                >
                  E-mail 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>
                        E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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="StatusLabel-container-id"
                      >
                        <div
                          class="undefined StatusLabel-successDot-id"
                        />
                        <div
                          class="StatusLabel-textContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Fully paid
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1215.89
                        </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"
            data-test="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </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="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Informations
              </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"
                >
                  E-mail 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>
                        E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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="StatusLabel-container-id"
                      >
                        <div
                          class="undefined StatusLabel-successDot-id"
                        />
                        <div
                          class="StatusLabel-textContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Fully paid
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1215.89
                        </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"
            data-test="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </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="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Informations
              </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"
                >
                  E-mail 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>
                        E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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="StatusLabel-container-id"
                      >
                        <div
                          class="undefined StatusLabel-successDot-id"
                        />
                        <div
                          class="StatusLabel-textContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Fully paid
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1215.89
                        </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"
            data-test="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-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
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Informations
              </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"
                >
                  E-mail 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>
                        E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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"
                    >
                      <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </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="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Informations
              </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"
                >
                  E-mail 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>
                        E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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="StatusLabel-container-id"
                      >
                        <div
                          class="undefined StatusLabel-successDot-id"
                        />
                        <div
                          class="StatusLabel-textContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Fully paid
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1215.89
                        </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"
            data-test="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </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="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Informations
              </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"
                >
                  E-mail 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>
                        E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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="StatusLabel-container-id"
                      >
                        <div
                          class="undefined StatusLabel-successDot-id"
                        />
                        <div
                          class="StatusLabel-textContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Fully paid
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1215.89
                        </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"
            data-test="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </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="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Informations
              </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"
                >
                  E-mail 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>
                        E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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="StatusLabel-container-id"
                      >
                        <div
                          class="undefined StatusLabel-successDot-id"
                        />
                        <div
                          class="StatusLabel-textContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Fully paid
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1215.89
                        </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"
            data-test="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </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="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Informations
              </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"
                >
                  E-mail 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>
                        E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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="StatusLabel-container-id"
                      >
                        <div
                          class="undefined StatusLabel-successDot-id"
                        />
                        <div
                          class="StatusLabel-textContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Fully paid
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1215.89
                        </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"
            data-test="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Tom Cooper
        </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="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                elizabeth.vaughn@example.com
                <div
                  class="MuiTypography-root-id CustomerDetails-subtitle-id MuiTypography-caption-id"
                >
                  Active member since May 2017
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Personal Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Informations
              </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"
                >
                  E-mail 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>
                        E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Recent Orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    View all orders
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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="StatusLabel-container-id"
                      >
                        <div
                          class="undefined StatusLabel-successDot-id"
                        />
                        <div
                          class="StatusLabel-textContainer-id"
                        >
                          <div
                            class="MuiTypography-root-id MuiTypography-body1-id"
                          >
                            Fully paid
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id CustomerOrders-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          1215.89
                        </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"
            data-test="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Manage
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer History
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Customers
      </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="createCustomer"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create customer
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Customers
      </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="createCustomer"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create customer
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Customers
      </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="createCustomer"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create customer
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Sale
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="SaleValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id SaleValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Sale
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="SaleValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id SaleValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Sale
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="SaleValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id SaleValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Happy minute day!
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="SaleValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id SaleValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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>
          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Collections
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign collections
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                            data-test="button-pagination-next"
                            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
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Happy minute day!
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="SaleValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id SaleValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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>
          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Categories
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign categories
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                            data-test="button-pagination-next"
                            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
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Happy minute day!
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="SaleValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id SaleValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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>
          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Categories
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign categories
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                            data-test="button-pagination-next"
                            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
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="SaleValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id SaleValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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>
          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Categories
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign categories
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="4"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </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>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Happy minute day!
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="SaleValue-tableContainer-id"
              >
                <div
                  class="ResponsiveTable-root-id"
                >
                  <table
                    class="MuiTable-root-id SaleValue-table-id"
                  >
                    <thead
                      class="MuiTableHead-root-id"
                    >
                      <tr
                        class="MuiTableRow-root-id MuiTableRow-head-id"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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>
          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Eligible Products
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assign-products"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="5"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                            data-test="button-pagination-next"
                            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
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                1/7 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                1/7 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                1/7 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                      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="StatusLabel-container-id"
                          >
                            <div
                              class="undefined"
                            />
                            <div
                              class="StatusLabel-textContainer-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-body1-id"
                              >
                                1/7 channels
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id DiscountProducts-colActions-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </div>
              <div
                class="MuiTypography-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Sales
      </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="create-sale"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1.00
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Sales
      </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="create-sale"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Sales
      </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="create-sale"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Sales
      </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="create-sale"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Sale
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="5"
              >
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Voucher
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="generate-code"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate Code
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Only once per order
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Voucher
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="generate-code"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate Code
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Only once per order
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          DISCOUNT
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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="MuiFormLabel-root-id 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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Only once per order
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                      >
                        <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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </div>
              <div
                class="MuiTypography-root-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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1.00
                  </div>
                </div>
              </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1.00
                  </div>
                </div>
              </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          DISCOUNT
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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="MuiFormLabel-root-id RadioGroupField-formLabel-id MuiFormLabel-error-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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Only once per order
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                      >
                        <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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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"
                      >
                        <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"
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </div>
              <div
                class="MuiTypography-root-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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1.00
                  </div>
                </div>
              </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1.00
                  </div>
                </div>
              </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Discount Type
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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"
                          />
                          <div
                            class="PrivateRadioButtonIcon-root-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                              />
                            </svg>
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                              />
                            </svg>
                          </div>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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"
                      >
                        <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="MuiFormLabel-root-id RadioGroupField-formLabel-id MuiFormLabel-disabled-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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Only once per order
                  <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Minimum Requirements
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Usage Limit
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="hasUsageLimit"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Active Dates
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </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"
              >
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Vouchers
      </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="create-voucher"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id"
              >
                FREE2019
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1.00
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id"
              >
                FREE2020
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1.00
                  </div>
                </div>
              </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1.00
                  </div>
                </div>
              </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Vouchers
      </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="create-voucher"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Vouchers
      </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="create-voucher"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="7"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Vouchers
      </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="create-voucher"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create voucher
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="6"
              >
                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-upperHeader-id MuiTypography-h4-id"
          >
            Ooops!...
          </div>
          <div
            class="MuiTypography-root-id ErrorPage-bottomHeader-id MuiTypography-h3-id"
          >
            Error
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            We've encountered a problem...
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Don't worry, everything is gonna be fine
          </div>
        </div>
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id ErrorPage-button-id MuiButton-containedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Back to home
            </span>
          </button>
        </div>
      </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="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test="welcomeHeader"
        >
          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"
                >
                  <div
                    class="Money-container-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      57.15
                    </div>
                  </div>
                </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 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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Top Products
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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 HomeProductListCard-tableRow-id MuiTableRow-hover-id"
                >
                  <td
                    avatarprops="HomeProductListCard-avatarProps-id"
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductListCard-colAvatar-id"
                    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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          37.65
                        </div>
                      </div>
                    </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Activity
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <ul
            class="MuiList-root-id MuiList-dense-id MuiList-padding-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="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test="welcomeHeader"
        >
          <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 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="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test="welcomeHeader"
        >
          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"
                >
                  <div
                    class="Money-container-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      57.15
                    </div>
                  </div>
                </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 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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Top Products
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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"
                >
                  <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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Activity
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <ul
            class="MuiList-root-id MuiList-dense-id MuiList-padding-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="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test="welcomeHeader"
        >
          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="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test="welcomeHeader"
        >
          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"
                >
                  <div
                    class="Money-container-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </div>
                    <div
                      class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                    />
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      57.15
                    </div>
                  </div>
                </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Activity
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <ul
            class="MuiList-root-id MuiList-dense-id MuiList-padding-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="home-header"
    >
      <div>
        <div
          class="MuiTypography-root-id HomeHeader-pageHeader-id MuiTypography-h4-id"
          data-test="welcomeHeader"
        >
          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 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                data-test-id="createNewMenuItem"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiButton-label-id"
                          >
                            Show
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                          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
                                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>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MenuItems-deleteButton-id MuiIconButton-colorPrimary-id"
                          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
                                d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                              />
                            </svg>
                          </span>
                        </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-text-id MuiButton-textPrimary-id"
                data-test-id="createNewMenuItem"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MenuItems-container-id"
              style="min-height:56px;padding:0 24px;padding-top:20px"
            >
              <span
                class="Skeleton-skeleton-id"
                data-test-id="skeleton"
              >
                ‌
              </span>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="createNewMenuItem"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Undo
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-id"
                data-test-id="createNewMenuItem"
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Navigation
      </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="addMenu"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Menu
            </span>
          </button>
        </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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Navigation
      </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="addMenu"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Menu
            </span>
          </button>
        </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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Navigation
      </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="addMenu"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Menu
            </span>
          </button>
        </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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="3"
              >
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Draft Orders
      </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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    305.17
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1215.89
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    321.71
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    271.95
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    335.84
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1042.15
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    213.69
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    367.03
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    298.76
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    663.69
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    280.41
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    234.93
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    485.19
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    223.54
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    237.55
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    453.55
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    812.67
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    481.41
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    569.19
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    557.00
                  </div>
                </div>
              </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Draft Orders
      </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 />
          <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 MuiIconButton-root-id Alert-close-id Alert-closeNoContent-id"
                data-test="close"
                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
                      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>
                </span>
              </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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    305.17
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1215.89
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    321.71
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    271.95
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    335.84
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1042.15
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    213.69
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    367.03
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    298.76
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    663.69
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    280.41
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    234.93
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    485.19
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    223.54
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    237.55
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    453.55
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    812.67
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    481.41
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    569.19
                  </div>
                </div>
              </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    557.00
                  </div>
                </div>
              </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Draft Orders
      </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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
              >
                <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Draft Orders
      </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="searchInput"
        >
          <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"
            >
              <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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="5"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="5"
              >
                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 OrderFulfillPage-container-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Order no. 9123 - Add Fulfillment
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Items ready to ship
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-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"
                >
                  C our wares
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
                  scope="col"
                >
                  Be stocked
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
                  scope="col"
                >
                  A Warehouse
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
                  scope="col"
                >
                  Darkwares
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantityTotal-id"
                  scope="col"
                >
                  Quantity to fulfill
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
                  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 OrderFulfillPage-colSku-id"
                >
                  62783187
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
                        max="false"
                        min="0"
                        style="text-align:right"
                        type="number"
                        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>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
                        max="false"
                        min="0"
                        style="text-align:right"
                        type="number"
                        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>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
                        max="false"
                        min="0"
                        style="text-align:right"
                        type="number"
                        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>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
                        max="false"
                        min="0"
                        style="text-align:right"
                        type="number"
                        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>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
                >
                  <span
                    class=""
                  >
                    0
                  </span>
                   / 2
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
                  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 OrderFulfillPage-colSku-id"
                >
                  998323583
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
                >
                  No Stock
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="758"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 758
                      </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 OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="727"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 727
                      </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 OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="756"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 756
                      </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 OrderFulfillPage-colQuantityTotal-id"
                >
                  <span
                    class=""
                  >
                    0
                  </span>
                   / 4
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
                  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 OrderFulfillPage-colSku-id"
                >
                  998323584
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="587"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 587
                      </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 OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
                >
                  No Stock
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="586"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 586
                      </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 OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
                >
                  No Stock
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
                >
                  <span
                    class=""
                  >
                    0
                  </span>
                   / 1
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Fulfill order error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id OrderFulfillPage-container-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Order no. 9123 - Add Fulfillment
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Items ready to ship
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-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"
                >
                  C our wares
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
                  scope="col"
                >
                  Be stocked
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
                  scope="col"
                >
                  A Warehouse
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantity-id OrderFulfillPage-colQuantityHeader-id"
                  scope="col"
                >
                  Darkwares
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantityTotal-id"
                  scope="col"
                >
                  Quantity to fulfill
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
                  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 OrderFulfillPage-colSku-id"
                >
                  62783187
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-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 OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
                        max="false"
                        min="0"
                        style="text-align:right"
                        type="number"
                        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>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
                        max="false"
                        min="0"
                        style="text-align:right"
                        type="number"
                        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>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
                        max="false"
                        min="0"
                        style="text-align:right"
                        type="number"
                        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>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
                        max="false"
                        min="0"
                        style="text-align:right"
                        type="number"
                        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>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
                >
                  <span
                    class=""
                  >
                    0
                  </span>
                   / 2
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
                  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 OrderFulfillPage-colSku-id"
                >
                  998323583
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
                >
                  No Stock
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="758"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 758
                      </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 OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="727"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 727
                      </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 OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="756"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 756
                      </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 OrderFulfillPage-colQuantityTotal-id"
                >
                  <span
                    class=""
                  >
                    0
                  </span>
                   / 4
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
                  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 OrderFulfillPage-colSku-id"
                >
                  998323584
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="587"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 587
                      </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 OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
                >
                  No Stock
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="586"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 586
                      </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 OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
                >
                  No Stock
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
                >
                  <span
                    class=""
                  >
                    0
                  </span>
                   / 1
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Fulfill order loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id OrderFulfillPage-container-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Order no.  - Add Fulfillment
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Items ready to ship
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-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-colQuantityTotal-id"
                  scope="col"
                >
                  Quantity to fulfill
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            />
          </table>
        </div>
      </div>
    </form>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Fulfill order one warehouse 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id OrderFulfillPage-container-id"
  >
    <div
      class="ExtendedPageHeader-root-id ExtendedPageHeader-block-id"
      data-test-id="page-header"
    >
      <div
        class="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Order no. 9123 - Add Fulfillment
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Items ready to ship
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colName-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"
                >
                  C our wares
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillPage-colQuantityTotal-id"
                  scope="col"
                >
                  Quantity to fulfill
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
                  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 OrderFulfillPage-colSku-id"
                >
                  62783187
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id OrderFulfillPage-quantityInnerInputNoRemaining-id"
                        max="false"
                        min="0"
                        style="text-align:right"
                        type="number"
                        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>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
                >
                  <span
                    class=""
                  >
                    0
                  </span>
                   / 2
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
                  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 OrderFulfillPage-colSku-id"
                >
                  998323583
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantity-id OrderFulfillPage-error-id"
                >
                  No Stock
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-colQuantityTotal-id"
                >
                  <span
                    class=""
                  >
                    0
                  </span>
                   / 4
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillPage-colName-id OrderFulfillPage-colName-id"
                  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 OrderFulfillPage-colSku-id"
                >
                  998323584
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillPage-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 OrderFulfillPage-quantityInnerInput-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        max="587"
                        min="0"
                        style="text-align:right"
                        type="number"
                        value="0"
                      />
                      <div
                        class="OrderFulfillPage-remainingQuantity-id"
                      >
                        / 587
                      </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 OrderFulfillPage-colQuantityTotal-id"
                >
                  <span
                    class=""
                  >
                    0
                  </span>
                   / 1
                </td>
              </tr>
            </tbody>
          </table>
        </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-error-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Cancelled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </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"
            data-test="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-success-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-successLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        />
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                  data-test-id="skeleton"
                >
                  ‌
                </span>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully refunded
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-neutral-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-neutralLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Partially fulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <div
            class="OrderDetailsPageTitleWithStatusChip-container-id"
          >
            9
            <div
              class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
            />
            <div
              class="StatusChip-root-id StatusChip-error-id StatusChip-lg-id"
            >
              <div
                class="MuiTypography-root-id StatusChip-label-id StatusChip-errorLabel-id StatusChip-lgLabel-id MuiTypography-body1-id"
              >
                Unfulfilled
              </div>
            </div>
          </div>
        </div>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="PageHeader-root-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                data-test-id="showMoreButton"
                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
                      d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
        </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="orderFulfillment"
        >
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-alertDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Unfulfilled
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        />
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderUnfulfilledItems-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          18.51
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          55.53
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-2
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from Be stocked
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="CardTitle-title-id"
                      >
                        Fulfilled (1)
                        <div
                          class="MuiTypography-root-id CardTitle-orderNumber-id MuiTypography-body1-id"
                        >
                          #9-1
                        </div>
                        <div
                          class="MuiTypography-root-id CardTitle-warehouseName-id MuiTypography-caption-id"
                        >
                          Fulfilled from C our wares
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id OrderFulfillment-deleteIcon-id"
                  data-test-id="cancelFulfillmentButton"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id OrderFulfillment-table-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 TableLine-clickableRow-id MuiTableRow-hover-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id TableLine-colName-id"
                      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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableLine-colTotal-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          79.71
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
                <tbody>
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id ExtraInfoLines-infoRow-id"
                      colspan="5"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        Fulfilled from: 
                        <div
                          class="MuiTypography-root-id ExtraInfoLines-infoLabel-id ExtraInfoLines-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 ExtraInfoLines-infoLabel-id MuiTypography-body2-id MuiTypography-colorTextPrimary-id"
                        >
                          01nn12399su12nndfsy
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <table
                class="OrderPayment-root-id"
              >
                <tbody>
                  <tr>
                    <td>
                      Subtotal
                    </td>
                    <td>
                      5 items
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          214.95
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Taxes
                    </td>
                    <td>
                      does not apply
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Shipping
                    </td>
                    <td>
                      Registred priority
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          19.98
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Total
                    </td>
                    <td />
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </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"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Captured amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr>
                    <td>
                      Refunded amount
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                  <tr
                    class="OrderPayment-totalRow-id"
                  >
                    <td>
                      Outstanding Balance
                    </td>
                    <td
                      class="OrderPayment-textRight-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -234.93
                        </div>
                      </div>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Capture
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Void
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Mark as paid
                </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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-text-id Timeline-button-id MuiButton-textPrimary-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-elevation0-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-elevation0-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 MuiExpansionPanel-root-id TimelineEvent-panel-id MuiExpansionPanel-rounded-id MuiPaper-elevation0-id MuiPaper-rounded-id"
                >
                  <div
                    aria-disabled="false"
                    aria-expanded="false"
                    class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id TimelineEvent-panelExpander-id"
                    role="button"
                    tabindex="0"
                  >
                    <div
                      class="MuiExpansionPanelSummary-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 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 MuiExpansionPanelSummary-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="MuiExpansionPanelDetails-root-id"
                          >
                            <div
                              class="MuiTypography-root-id MuiTypography-body1-id"
                            >
                              <div
                                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                style="font-size:sm"
                              >
                                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:sm"
                                      >
                                        Cow's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                                      >
                                        Goat's milk
                                      </div>
                                    </td>
                                    <td
                                      class="OrderHistory-linesTableCell-id"
                                    >
                                      <div
                                        class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                                        style="font-size:sm"
                                      >
                                        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:sm"
                              >
                                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Customer
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Sales channel
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Invoices
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Generate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id MuiButton-textPrimary-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #24
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="add-products-button"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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"
                >
                  <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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                    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 MuiTypography-body1-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          168.30
                        </div>
                      </div>
                    </a>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        336.60
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                    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 MuiTypography-body1-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          168.30
                        </div>
                      </div>
                    </a>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        336.60
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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 MuiTypography-body1-id"
                    >
                      Add Discount
                    </a>
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    ---
                  </td>
                </tr>
                <tr>
                  <td>
                    Subtotal
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        168.30
                      </div>
                    </div>
                  </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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        68.30
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    Total
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        168.30
                      </div>
                    </div>
                  </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-text-id Timeline-button-id MuiButton-textPrimary-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="edit-customer"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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"
            >
              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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Sales channel
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
          style="width:10em"
        >
          ‌
        </span>
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="edit-customer"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Sales channel
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #24
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="add-products-button"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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"
                >
                  <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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                    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 MuiTypography-body1-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          168.30
                        </div>
                      </div>
                    </a>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        336.60
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                    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 MuiTypography-body1-id"
                    >
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          168.30
                        </div>
                      </div>
                    </a>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        336.60
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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 MuiTypography-body1-id"
                    >
                      Add Discount
                    </a>
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    ---
                  </td>
                </tr>
                <tr>
                  <td>
                    Subtotal
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        168.30
                      </div>
                    </div>
                  </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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        68.30
                      </div>
                    </div>
                  </td>
                </tr>
                <tr>
                  <td>
                    Total
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        168.30
                      </div>
                    </div>
                  </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-text-id Timeline-button-id MuiButton-textPrimary-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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"
            >
              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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Sales channel
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        #24
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="add-products-button"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add products
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id OrderDraftDetailsProducts-table-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-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-text-id Timeline-button-id MuiButton-textPrimary-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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="edit-customer"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Edit
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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-text-id MuiButton-textPrimary-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"
            >
              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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Sales channel
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Orders
      </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
            class="OrderListPage-settings-id"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-order-button"
            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 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="searchInput"
        >
          <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"
            >
              <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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    305.17
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1215.89
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Draft
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    321.71
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    271.95
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    335.84
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1042.15
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    213.69
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    367.03
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    298.76
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unfulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    663.69
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    280.41
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    234.93
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    485.19
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    223.54
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    237.55
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    453.55
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    812.67
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    481.41
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    569.19
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    557.00
                  </div>
                </div>
              </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Orders
      </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
            class="OrderListPage-settings-id"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="create-order-button"
            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 />
          <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 MuiIconButton-root-id Alert-close-id Alert-closeNoContent-id"
                data-test="close"
                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
                      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>
                </span>
              </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="searchInput"
        >
          <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"
            >
              <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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    305.17
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1215.89
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Draft
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    321.71
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    271.95
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    335.84
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1042.15
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    213.69
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    367.03
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    298.76
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unfulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    663.69
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    280.41
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    234.93
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    485.19
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    223.54
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    237.55
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    453.55
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    812.67
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    481.41
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    569.19
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    557.00
                  </div>
                </div>
              </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Orders
      </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
            class="OrderListPage-settings-id"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-order-button"
            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"
              >
                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="searchInput"
        >
          <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-text-id FilterBar-tabActionButton-id MuiButton-textPrimary-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"
            >
              <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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
              >
                <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Orders
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="OrderListPage-settings-id"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-order-button"
            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 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="searchInput"
        >
          <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"
            >
              <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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    305.17
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1215.89
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Draft
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    321.71
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    271.95
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    335.84
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    1042.15
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    213.69
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    367.03
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    298.76
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unfulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    663.69
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Cancelled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    280.41
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    234.93
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    485.19
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    223.54
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    237.55
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    453.55
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    812.67
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-errorDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Unpaid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    481.41
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    569.19
                  </div>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Fully paid
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colFulfillment-id"
              >
                <div
                  class="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-neutralDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      Partially fulfilled
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id OrderList-colTotal-id"
              >
                <div
                  class="Money-container-id"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-caption-id"
                  >
                    USD
                  </div>
                  <div
                    class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                  />
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    557.00
                  </div>
                </div>
              </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Orders
      </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
            class="OrderListPage-settings-id"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="create-order-button"
            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 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="searchInput"
        >
          <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"
            >
              <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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="6"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Order settings
        </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="orderSettings"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <label
              class="MuiFormControlLabel-root-id"
              data-test="automaticallyConfirmAllNewOrdersCheckbox"
            >
              <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"
                  >
                    <path
                      d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                    />
                  </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="automaticallyFulfillNonShippableGiftCardsCheckbox"
            >
              <span
                aria-disabled="false"
                class="MuiButtonBase-root-id MuiIconButton-root-id PrivateSwitchBase-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"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </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="OrderFulfillmentSettings"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Fulfillment settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <label
              class="MuiFormControlLabel-root-id"
              data-test="fulfillmentAutoApproveCheckbox"
            >
              <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"
                  >
                    <path
                      d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                    />
                  </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="fulfillmentAllowUnpaidCheckbox"
            >
              <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"
                  >
                    <path
                      d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                    />
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Order settings
        </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="orderSettings"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <label
              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              data-test="automaticallyConfirmAllNewOrdersCheckbox"
            >
              <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"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </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="automaticallyFulfillNonShippableGiftCardsCheckbox"
            >
              <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"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </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="OrderFulfillmentSettings"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Fulfillment settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <label
              class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              data-test="fulfillmentAutoApproveCheckbox"
            >
              <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"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </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="fulfillmentAllowUnpaidCheckbox"
            >
              <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"
                  >
                    <path
                      d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                    />
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Order no.  - Refund
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Refund Order
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Refunded Amount
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-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"
                      />
                      <div
                        class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                          />
                        </svg>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                          />
                        </svg>
                      </div>
                    </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      />
                      <div
                        class="PrivateRadioButtonIcon-root-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                          />
                        </svg>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                          />
                        </svg>
                      </div>
                    </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-containedSizeLarge-id MuiButton-sizeLarge-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
                data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Order no. 22 - Refund
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Refund Order
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Refunded Amount
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="OrderRefundAmountValues-container-id"
              >
                <div
                  class="OrderRefundAmountValues-row-id"
                >
                  Authorized Amount
                  <div>
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        744.38
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="OrderRefundAmountValues-row-id"
                >
                  Previously refunded
                  <div>
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        -100.00
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="OrderRefundAmountValues-row-id OrderRefundAmountValues-highlightedRow-id"
                >
                  Max Refund
                  <div>
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        644.38
                      </div>
                    </div>
                  </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"
                    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-containedSizeLarge-id MuiButton-sizeLarge-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
                data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Order no. 22 - Refund
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Refund Order
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Unfulfilled Products
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-text-id OrderRefundUnfulfilledProducts-setMaximalQuantityButton-id MuiButton-textPrimary-id"
                data-test="setMaximalQuantityUnfulfilledButton"
                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"
                >
                  <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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        26.02
                      </div>
                    </div>
                  </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="quantityInput"
                          data-test-id="diufhdsif"
                          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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        0.00
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        10.00
                      </div>
                    </div>
                  </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="quantityInput"
                          data-test-id="fdsfdfdsf"
                          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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        0.00
                      </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"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Fulfillment
                <div
                  class="MuiTypography-root-id OrderRefundFulfilledProducts-orderNumber-id MuiTypography-body1-id"
                >
                  #22-1
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id OrderRefundFulfilledProducts-cartContent-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id OrderRefundFulfilledProducts-setMaximalQuantityButton-id MuiButton-textPrimary-id"
                data-test="setMaximalQuantityFulfilledButton"
                data-test-id="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"
                >
                  <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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        26.02
                      </div>
                    </div>
                  </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="quantityInput"
                          data-test-id="fg3333fu66666"
                          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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        0.00
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        10.00
                      </div>
                    </div>
                  </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="quantityInput"
                          data-test-id="fgytrytytu88977"
                          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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        0.00
                      </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"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Fulfillment
                <div
                  class="MuiTypography-root-id OrderRefundFulfilledProducts-orderNumber-id MuiTypography-body1-id"
                >
                  #22-2
                </div>
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id OrderRefundFulfilledProducts-cartContent-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id OrderRefundFulfilledProducts-setMaximalQuantityButton-id MuiButton-textPrimary-id"
                data-test="setMaximalQuantityFulfilledButton"
                data-test-id="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"
                >
                  <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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        26.02
                      </div>
                    </div>
                  </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="quantityInput"
                          data-test-id="fgydgsyfu23456"
                          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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        0.00
                      </div>
                    </div>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                    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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        10.00
                      </div>
                    </div>
                  </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="quantityInput"
                          data-test-id="fgydgsyfu555444"
                          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"
                  >
                    <div
                      class="Money-container-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        USD
                      </div>
                      <div
                        class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                      />
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        0.00
                      </div>
                    </div>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Refunded Amount
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-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"
                      />
                      <div
                        class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                          />
                        </svg>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                          />
                        </svg>
                      </div>
                    </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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>
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          744.38
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="OrderRefundAmountValues-row-id"
                  >
                    Selected Products Value
                    <div>
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="OrderRefundAmountValues-row-id"
                  >
                    Previously refunded
                    <div>
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          -100.00
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="OrderRefundAmountValues-row-id OrderRefundAmountValues-highlightedRow-id"
                  >
                    Max Refund
                    <div>
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          644.38
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="OrderRefundAmountValues-row-id OrderRefundAmountValues-highlightedRow-id"
                  >
                    Refund total amount
                    <div>
                      <div
                        class="Money-container-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id"
                        >
                          USD
                        </div>
                        <div
                          class="HorizontalSpacer-container-id HorizontalSpacer-container-id"
                        />
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          0.00
                        </div>
                      </div>
                    </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"
                      />
                      <div
                        class="PrivateRadioButtonIcon-root-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                          />
                        </svg>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                          />
                        </svg>
                      </div>
                    </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-containedSizeLarge-id MuiButton-sizeLarge-id MuiButton-disabled-id MuiButton-fullWidth-id MuiButtonBase-disabled-id"
                data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Page Type
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Page Type
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Page Type
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Blog
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
              >
                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="page-attributes"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Content Attributes
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="assignAttributes"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Assign attribute
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </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"
                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-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>
                  </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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test="name"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test="slug"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test="id"
                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-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>
                  </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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test="name"
                  >
                    Language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test="slug"
                  >
                    language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test="id"
                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-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>
                  </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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test="name"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test="slug"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          >
            <div
              class="Metadata-togglable-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 Field
              </div>
              <button
                class="MuiButtonBase-root-id MuiIconButton-root-id"
                data-test="expand"
                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
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <table
            class="MuiTable-root-id Metadata-table-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-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"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="deleteField"
                    data-test-id="0"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Blog
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-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="page-attributes"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Content Attributes
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="assignAttributes"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Assign attribute
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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>
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </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"
                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-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>
                  </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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test="name"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test="slug"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test="id"
                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-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>
                  </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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test="name"
                  >
                    Language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test="slug"
                  >
                    language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id PageTypeAttributes-link-id MuiTableRow-hover-id"
                  data-test="id"
                  data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-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>
                  </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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test="name"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colSlug-id"
                    data-test="slug"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colAction-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          >
            <div
              class="Metadata-togglable-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 Field
              </div>
              <button
                class="MuiButtonBase-root-id MuiIconButton-root-id"
                data-test="expand"
                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
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <table
            class="MuiTable-root-id Metadata-table-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-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"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="deleteField"
                    data-test-id="0"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-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="page-attributes"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Content Attributes
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="assignAttributes"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Assign attribute
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-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>
                  </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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id PageTypeAttributes-colName-id"
                    data-test="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="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 MuiIconButton-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Blog
        </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="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
              >
                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="page-attributes"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Content Attributes
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="assignAttributes"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Assign attribute
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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"
                >
                  <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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="false"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          >
            <div
              class="Metadata-togglable-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
              >
                1 Field
              </div>
              <button
                class="MuiButtonBase-root-id MuiIconButton-root-id"
                data-test="expand"
                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
                      d="M7 10l5 5 5-5z"
                    />
                  </svg>
                </span>
              </button>
            </div>
          </div>
          <table
            class="MuiTable-root-id Metadata-table-id"
          >
            <thead
              class="MuiTableHead-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-head-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"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="deleteField"
                    data-test-id="0"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="metadataEditor"
          data-test-expanded="true"
          data-test-is-private="true"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Private Metadata
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id Metadata-content-id"
          />
          <div
            class="Metadata-emptyContainer-id"
          >
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              There is no private metadata created for this element.
            </div>
            <div
              class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
            >
              Use the button below to add new metadata field
            </div>
          </div>
          <div
            class="MuiCardActions-root-id MuiCardActions-spacing-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
              data-test="addField"
              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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Page Types
      </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="createPageType"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create page type
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
              >
                <span
                  data-test="name"
                >
                  Blog
                </span>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
              data-test="id"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
              >
                <span
                  data-test="name"
                >
                  Landing Page
                </span>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PageTypeList-link-id MuiTableRow-hover-id"
              data-test="id"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PageTypeList-colName-id"
              >
                <span
                  data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Page Types
      </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="createPageType"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create page type
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Page Types
      </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="createPageType"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create page type
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="2"
              >
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          About
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Author
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="Dylan Lamb"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Tag
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Content
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          About
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootError-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Author
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="Dylan Lamb"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Tag
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
              />
              <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Content
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Visibility
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Content
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test-id="pageTypesAutocompleteSelect"
              >
                <div
                  class="MuiFormControl-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Pages
      </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="createPage"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page
            </span>
          </button>
        </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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    About
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    about
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <div
                      class="StatusLabel-container-id"
                    >
                      <div
                        class="undefined StatusLabel-successDot-id"
                      />
                      <div
                        class="StatusLabel-textContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Published
                        </div>
                      </div>
                    </div>
                  </div>
                </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    About
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    about
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <div
                      class="StatusLabel-container-id"
                    >
                      <div
                        class="undefined StatusLabel-errorDot-id"
                      />
                      <div
                        class="StatusLabel-textContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Not Published
                        </div>
                      </div>
                    </div>
                  </div>
                </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    About
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    about
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <div
                      class="StatusLabel-container-id"
                    >
                      <div
                        class="undefined StatusLabel-successDot-id"
                      />
                      <div
                        class="StatusLabel-textContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Published
                        </div>
                      </div>
                    </div>
                  </div>
                </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    About
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    about
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <div
                      class="StatusLabel-container-id"
                    >
                      <div
                        class="undefined StatusLabel-successDot-id"
                      />
                      <div
                        class="StatusLabel-textContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Published
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Pages
      </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="createPage"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page
            </span>
          </button>
        </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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colTitle-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colSlug-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellHeader-root-id PageList-colVisibility-id"
              >
                <div
                  class="TableCellHeader-labelContainer-id"
                >
                  <div
                    class="TableCellHeader-label-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                      data-test-id="skeleton"
                    >
                      ‌
                    </span>
                  </div>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Pages
      </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="createPage"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create page
            </span>
          </button>
        </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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id"
                colspan="4"
              >
                No pages found
              </td>
            </tr>
          </tbody>
        </table>
      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="fullAccess"
                  >
                    <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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="fullAccess"
                  >
                    <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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="fullAccess"
                    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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Editors
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Group members
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assign-members"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign members
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                      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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="removeUser"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="removeUser"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="removeUser"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="removeUser"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="fullAccess"
                  >
                    <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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Group members
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textSecondary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                      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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test-id="removeUser"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test-id="removeUser"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test-id="removeUser"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test-id="removeUser"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="fullAccess"
                    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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Editors
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Group members
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assign-members"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign members
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="fullAccess"
                  >
                    <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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Permission Groups
      </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="createPermissionGroup"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create permission group
            </span>
          </button>
        </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"
            >
              <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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
              data-test-id="R3JvdXA6Mg=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test="name"
                >
                  Customer Support
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test="members"
                >
                  1
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test-id="deleteIcon"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        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>
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
              data-test="id"
              data-test-id="R3JvdXA6MQ=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test="name"
                >
                  Full Access
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test="members"
                >
                  1
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        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>
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
              data-test="id"
              data-test-id="R3JvdXA6NA=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test="name"
                >
                  Management
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test="members"
                >
                  0
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test-id="deleteIcon"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        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>
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
              data-test="id"
              data-test-id="R3JvdXA6Mw=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test="name"
                >
                  Editors
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test="members"
                >
                  2
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test-id="deleteIcon"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        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>
                  </span>
                </button>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id PermissionGroupList-link-id MuiTableRow-hover-id"
              data-test="id"
              data-test-id="R3JvdXA6NQ=="
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colName-id"
              >
                <span
                  data-test="name"
                >
                  Publishers
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colMembers-id"
              >
                <span
                  data-test="members"
                >
                  0
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id PermissionGroupList-colActions-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  data-test-id="deleteIcon"
                  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
                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                      />
                    </svg>
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                  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
                        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>
                  </span>
                </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Permission Groups
      </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="createPermissionGroup"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create permission group
            </span>
          </button>
        </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"
            >
              <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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test="id"
            >
              <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Permission Groups
      </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="createPermissionGroup"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create permission group
            </span>
          </button>
        </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"
            >
              <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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Username or account Details
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Channels
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Plugin Information and Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Username or account Details
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Channels
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Plugin Information and Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          ... Details
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Channels
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Plugin Information and Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Username or account Details
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Channels
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Plugin Information and Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Plugins
      </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="searchInput"
        >
          <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"
                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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="10"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="ChannelStatusLabel-horizontalContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Active in 1/1
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
              >
                <div>
                  <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>
                </div>
              </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="StatusLabel-container-id"
                >
                  <div
                    class="undefined StatusLabel-successDot-id"
                  />
                  <div
                    class="StatusLabel-textContainer-id"
                  >
                    <div
                      class="MuiTypography-root-id MuiTypography-body1-id"
                    >
                      <div
                        class="ChannelStatusLabel-horizontalContainer-id"
                      >
                        <div
                          class="MuiTypography-root-id MuiTypography-body1-id"
                        >
                          Active in 1/1
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-alignRight-id"
              >
                <div>
                  <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>
                </div>
              </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Plugins
      </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="searchInput"
        >
          <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"
                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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="10"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Plugins
      </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="searchInput"
        >
          <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"
                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"
                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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="10"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create product type
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          This is a normal product
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create shipping passes for your customers
                        </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          Products of this type can be used as gift card/voucher
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create voucher/gift card type products that user will be able to pay with during checkout process
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Taxes
                        </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create product type
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          This is a normal product
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create shipping passes for your customers
                        </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          Products of this type can be used as gift card/voucher
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create voucher/gift card type products that user will be able to pay with during checkout process
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Taxes
                        </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          This is a normal product
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create shipping passes for your customers
                        </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          Products of this type can be used as gift card/voucher
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create voucher/gift card type products that user will be able to pay with during checkout process
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Taxes
                        </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          E-books
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          This is a normal product
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create shipping passes for your customers
                        </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          Products of this type can be used as gift card/voucher
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create voucher/gift card type products that user will be able to pay with during checkout process
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="PH405458"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Taxes
                        </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="product-attributes"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignProductsAttributes"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test="name"
                    >
                      Author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test="slug"
                    >
                      author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test="id"
                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test="name"
                    >
                      Language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test="slug"
                    >
                      language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test="id"
                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test="name"
                    >
                      Publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test="slug"
                    >
                      publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          E-books
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          This is a normal product
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create shipping passes for your customers
                        </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          Products of this type can be used as gift card/voucher
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create voucher/gift card type products that user will be able to pay with during checkout process
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="PH405458"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Taxes
                        </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="product-attributes"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignProductsAttributes"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-id"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZTo5"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test="name"
                    >
                      Author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test="slug"
                    >
                      author
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test="id"
                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMQ=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test="name"
                    >
                      Language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test="slug"
                    >
                      language
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                  <tr
                    class="MuiTableRow-root-id ProductTypeAttributes-link-id MuiTableRow-hover-id"
                    data-test="id"
                    data-test-id="UHJvZHVjdEF0dHJpYnV0ZToxMA=="
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test="name"
                    >
                      Publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                      data-test="slug"
                    >
                      publisher
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colAction-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          This is a normal product
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create shipping passes for your customers
                        </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          Products of this type can be used as gift card/voucher
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create voucher/gift card type products that user will be able to pay with during checkout process
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Taxes
                        </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="product-attributes"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignProductsAttributes"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id SortableHandle-columnDrag-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                      data-test="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="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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          E-books
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          This is a normal product
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create shipping passes for your customers
                        </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        >
                          Products of this type can be used as gift card/voucher
                        </div>
                        <div
                          class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id"
                        >
                          This product type can be used to create voucher/gift card type products that user will be able to pay with during checkout process
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Taxes
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="PH405458"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Taxes
                        </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="product-attributes"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assignProductsAttributes"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign attribute
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Product Types
      </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="addProductType"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create product type
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test="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"
              data-test-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
              >
                <span
                  data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Product Types
      </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="addProductType"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create product type
            </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 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="searchInput"
        >
          <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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Product Types
      </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="addProductType"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              create product type
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="4"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Price
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                    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"
                    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"
                    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"
                    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"
                    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"
                    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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Stock and Warehousing
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
              >
                <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"
              >
                <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"
              >
                <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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Price
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                    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"
                    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"
                    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"
                    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"
                    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"
                    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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Stock and Warehousing
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
              >
                <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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Price
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                    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"
                    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"
                    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"
                    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"
                    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"
                    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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Stock and Warehousing
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </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"
                >
                  <path
                    d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                  />
                </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"
                >
                  <path
                    d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                  />
                </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Price
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                    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"
                    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"
                    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"
                    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"
                    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"
                    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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Stock and Warehousing
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Price
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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"
                    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"
                    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"
                    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"
                    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"
                    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"
                    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"
                />
                <div
                  class="PrivateRadioButtonIcon-root-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                    />
                  </svg>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                    />
                  </svg>
                </div>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Stock and Warehousing
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Created Variants
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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=""
                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=""
                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=""
                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 MuiIconButton-root-id ProductVariantCreatorSummary-delete-id MuiIconButton-colorPrimary-id"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </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=""
                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=""
                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=""
                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 MuiIconButton-root-id ProductVariantCreatorSummary-delete-id MuiIconButton-colorPrimary-id"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </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=""
                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=""
                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=""
                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 MuiIconButton-root-id ProductVariantCreatorSummary-delete-id MuiIconButton-colorPrimary-id"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </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=""
                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=""
                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=""
                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 MuiIconButton-root-id ProductVariantCreatorSummary-delete-id MuiIconButton-colorPrimary-id"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Created Variants
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <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=""
                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=""
                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=""
                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 MuiIconButton-root-id ProductVariantCreatorSummary-delete-id MuiIconButton-colorPrimary-id"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </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=""
                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=""
                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=""
                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 MuiIconButton-root-id ProductVariantCreatorSummary-delete-id MuiIconButton-colorPrimary-id"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </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=""
                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=""
                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=""
                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 MuiIconButton-root-id ProductVariantCreatorSummary-delete-id MuiIconButton-colorPrimary-id"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </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=""
                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=""
                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=""
                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 MuiIconButton-root-id ProductVariantCreatorSummary-delete-id MuiIconButton-colorPrimary-id"
            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
                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                />
              </svg>
            </span>
          </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Box Size
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <div
        class="MuiCardContent-root-id"
        data-test-id="value-container"
      >
        <div
          class="MultiAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-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
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                type="text"
                value=""
              />
              <div
                class="MultiAutocompleteSelectField-adornment-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="remove"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <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>
                </span>
              </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="remove"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <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>
                </span>
              </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="CardTitle-root-id"
      >
        <span
          class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
        >
          Coffee Genre
        </span>
        <div
          class="CardTitle-toolbar-id"
        />
      </div>
      <div
        class="CardTitle-children-id"
      />
      <hr
        class="CardTitle-hr-id"
      />
      <div
        class="MuiCardContent-root-id"
        data-test-id="value-container"
      >
        <div
          class="MultiAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiTextField-root-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
              aria-autocomplete="list"
              aria-expanded="false"
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
              role="combobox"
            >
              <input
                aria-invalid="false"
                autocomplete="off"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                type="text"
                value=""
              />
              <div
                class="MultiAutocompleteSelectField-adornment-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                data-test-id="remove"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <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>
                </span>
              </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-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
        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 MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="next-step"
            disabled=""
            tabindex="-1"
            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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Author
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
          data-test-id="value-container"
        >
          <div
            class="MultiAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-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
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value=""
                />
                <div
                  class="MultiAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Box Size
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
          data-test-id="value-container"
        >
          <div
            class="MultiAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-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
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value=""
                />
                <div
                  class="MultiAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Coffee Genre
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
          data-test-id="value-container"
        >
          <div
            class="MultiAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-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
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value=""
                />
                <div
                  class="MultiAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
          >
            Color
          </span>
          <div
            class="CardTitle-toolbar-id"
          />
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="MuiCardContent-root-id"
          data-test-id="value-container"
        >
          <div
            class="MultiAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiTextField-root-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
                aria-autocomplete="list"
                aria-expanded="false"
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                role="combobox"
              >
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value=""
                />
                <div
                  class="MultiAutocompleteSelectField-adornment-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add product
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="product-type"
              >
                <div
                  class="MuiFormControl-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                data-test="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add product
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="product-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add product
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Author
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        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"
                        role="combobox"
                      >
                        <input
                          aria-invalid="true"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="product-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Candy"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Product Type
                        </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"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add variant
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id ProductVariantNavigation-firstVariant-id"
                      colspan="2"
                    >
                      <div
                        class="Avatar-content-id Avatar-alignRight-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
                              d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                              fill="url(#paint0_linear)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="3"
                                x2="22.8"
                                y1="3"
                                y2="23.5714"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      New Variant
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                        data-test="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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Selection Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Color
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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>
            <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"
                >
                  <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"
                >
                  <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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-warehouse"
                        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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add variant
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
                      colspan="2"
                    >
                      <div
                        class="Avatar-content-id Avatar-alignRight-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
                              d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                              fill="url(#paint0_linear)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="3"
                                x2="22.8"
                                y1="3"
                                y2="23.5714"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      New Variant
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                        data-test="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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Selection Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Color
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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>
            <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"
                >
                  <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"
                >
                  <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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-warehouse"
                        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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add variant
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
                      colspan="2"
                    >
                      <div
                        class="Avatar-content-id Avatar-alignRight-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
                              d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                              fill="url(#paint0_linear)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="3"
                                x2="22.8"
                                y1="3"
                                y2="23.5714"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      New Variant
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                        data-test="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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Selection Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Color
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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 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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add variant
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                    >
                      <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
                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
                      colspan="2"
                    >
                      <div
                        class="Avatar-content-id Avatar-alignRight-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
                              d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                              fill="url(#paint0_linear)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="3"
                                x2="22.8"
                                y1="3"
                                y2="23.5714"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      New Variant
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Selection Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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"
                >
                  <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"
                >
                  <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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-warehouse"
                        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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Add variant
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id ProductVariantNavigation-tabActive-id ProductVariantNavigation-noHandle-id"
                      colspan="2"
                    >
                      <div
                        class="Avatar-content-id Avatar-alignRight-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
                              d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                              fill="url(#paint0_linear)"
                            />
                            <defs>
                              <linearGradient
                                gradientUnits="userSpaceOnUse"
                                id="paint0_linear"
                                x1="3"
                                x2="22.8"
                                y1="3"
                                y2="23.5714"
                              >
                                <stop
                                  stop-color="#06847B"
                                />
                                <stop
                                  offset="1"
                                  stop-color="#3EE7CD"
                                />
                              </linearGradient>
                            </defs>
                          </svg>
                        </div>
                      </div>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                    >
                      New Variant
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="AttributeRow-fileField-id"
                  >
                    <div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id"
                        data-test="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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Selection Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Color
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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>
            <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"
                >
                  <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"
                >
                  <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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-warehouse"
                        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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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"
                      >
                        Value
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        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"
                        role="combobox"
                      >
                        <input
                          aria-invalid="true"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 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"
            >
              <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      3 available at 2 locations
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      11 available at 1 location
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="actions"
                    >
                      <div
                        data-test="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                          data-test-id="showMoreButton"
                          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
                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                              />
                            </svg>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Category
                        </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"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
                  data-test="button-add-variant"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 />
                  <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 MuiIconButton-root-id Alert-close-id Alert-closeNoContent-id"
                        data-test="close"
                        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
                              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>
                        </span>
                      </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 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"
            >
              <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      3 available at 2 locations
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      11 available at 1 location
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="actions"
                    >
                      <div
                        data-test="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                          data-test-id="showMoreButton"
                          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
                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                              />
                            </svg>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 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"
            >
              <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      3 available at 2 locations
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      11 available at 1 location
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="actions"
                    >
                      <div
                        data-test="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                          data-test-id="showMoreButton"
                          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
                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                              />
                            </svg>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 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"
            >
              <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      3 available at 2 locations
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      11 available at 1 location
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="actions"
                    >
                      <div
                        data-test="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                          data-test-id="showMoreButton"
                          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
                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                              />
                            </svg>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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-text-id MuiButton-textPrimary-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 MuiFormLabel-required-id MuiInputLabel-required-id"
                    data-shrink="true"
                  >
                    Global threshold
                    <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      required=""
                      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 MuiFormHelperText-required-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Simple
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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-text-id MuiButton-textPrimary-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 MuiFormLabel-required-id MuiInputLabel-required-id"
                    data-shrink="true"
                  >
                    Global threshold
                    <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      required=""
                      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 MuiFormHelperText-required-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Simple
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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-text-id MuiButton-textPrimary-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 MuiFormLabel-required-id MuiInputLabel-required-id"
                    data-shrink="true"
                  >
                    Global threshold
                    <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      required=""
                      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 MuiFormHelperText-required-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Simple
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 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"
            >
              <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      3 available at 2 locations
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      11 available at 1 location
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="actions"
                    >
                      <div
                        data-test="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                          data-test-id="showMoreButton"
                          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
                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                              />
                            </svg>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                >
                  <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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-warehouse"
                        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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                ...
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </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
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    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"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      type="text"
                      value=""
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                data-test="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                      d="M6.10864 17.8974H3.29212C3.23158 17.8878 3.16942 17.8772 3.12042 17.8416C3.04669 17.788 3.01472 17.6983 3 17.6051V3.29232C3.01963 3.16818 3.08547 3.05213 3.20185 3.01431C3.23081 3.00488 3.26204 3.00477 3.29212 3H17.595C17.6248 3.00477 17.655 3.00954 17.6851 3.01431C17.7693 3.05715 17.8446 3.11527 17.8727 3.20199C17.8821 3.23097 17.8821 3.26223 17.887 3.29232V6.10798L20.7073 6.10342C20.7374 6.10815 20.7676 6.11285 20.7977 6.11759C20.8819 6.16039 20.9572 6.21852 20.9856 6.3053C20.9951 6.33435 20.9951 6.36561 21 6.39574V20.7074C20.9804 20.8315 20.9145 20.9476 20.7981 20.9854C20.769 20.9948 20.7378 20.9949 20.7076 20.9997L6.4008 21C6.34022 20.9904 6.27807 20.9798 6.22906 20.9442C6.15534 20.8906 6.1234 20.8009 6.10864 20.7077V17.8974ZM20.4156 18.1487H6.69292V20.4154L20.4156 20.415V18.1487ZM17.3216 10.7226L14.5234 13.4247L18.5752 17.4543C18.6102 17.5025 18.6316 17.5227 18.6457 17.5641H20.4156V13.6145L17.3216 10.7226ZM7.13581 17.5392C7.13753 17.5474 7.13886 17.5557 7.13988 17.5641H17.8565L12.6137 12.3498L7.13581 17.5392ZM17.3027 6.10892V3.58465H3.58424V17.3128H6.10864V6.41886C6.11821 6.35835 6.1288 6.29622 6.16431 6.24721C6.21777 6.17347 6.30727 6.14141 6.40031 6.12653L17.3027 6.10892ZM20.4156 12.8145V6.68856C15.8415 6.69596 11.2671 6.70333 6.69292 6.71073V17.1537L12.4178 11.7303C12.4913 11.6796 12.492 11.6793 12.5774 11.6532C12.6073 11.6536 12.6371 11.6539 12.667 11.6543C12.7517 11.6824 12.7524 11.6827 12.8246 11.7352L14.1087 13.0125L17.1155 10.1091C17.2122 10.0238 17.2154 10.0181 17.3552 10.0295C17.453 10.0463 17.4713 10.0661 17.5179 10.1059L20.4156 12.8145ZM9.46155 7.9651C10.1933 7.97204 10.8858 8.53631 11.0257 9.26605C11.125 9.7844 10.9492 10.3474 10.571 10.717C10.1291 11.1488 9.4265 11.2926 8.84531 11.0548C8.33223 10.8449 7.94546 10.3525 7.86504 9.80323C7.7658 9.12545 8.15208 8.40581 8.77376 8.11517C8.98813 8.01494 9.22433 7.96432 9.46155 7.9651ZM9.44459 8.54974C8.98175 8.55416 8.54681 8.90584 8.45303 9.36375C8.32277 10 8.9137 10.7061 9.63799 10.5718C10.051 10.4953 10.398 10.137 10.4593 9.71848C10.5424 9.15123 10.0783 8.55953 9.46446 8.54981C9.45784 8.54974 9.45121 8.54974 9.44459 8.54974Z"
                      fill="url(#paint0_linear)"
                    />
                    <defs>
                      <linearGradient
                        gradientUnits="userSpaceOnUse"
                        id="paint0_linear"
                        x1="3"
                        x2="22.8"
                        y1="3"
                        y2="23.5714"
                      >
                        <stop
                          stop-color="#06847B"
                        />
                        <stop
                          offset="1"
                          stop-color="#3EE7CD"
                        />
                      </linearGradient>
                    </defs>
                  </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 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"
            >
              <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      3 available at 2 locations
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      11 available at 1 location
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="actions"
                    >
                      <div
                        data-test="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                          data-test-id="showMoreButton"
                          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
                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                              />
                            </svg>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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-text-id MuiButton-textPrimary-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 MuiFormLabel-required-id MuiInputLabel-required-id"
                    data-shrink="true"
                  >
                    Global threshold
                    <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      required=""
                      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 MuiFormHelperText-required-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Simple
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Ergonomic Plastic Bacon
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="MediaTile-media-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="MediaTile-mediaContainer-id"
                    data-test="product-image"
                  >
                    <div
                      class="MediaTile-mediaOverlay-id"
                    >
                      <div
                        class="MediaTile-mediaOverlayToolbar-id"
                      />
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="MultiAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          data-test-id="remove"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <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>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 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"
            >
              <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-id"
                      scope="col"
                    />
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      Cordoba Oro
                      <span
                        class="ProductVariants-defaultVariant-id"
                      >
                        Default
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      87192-94370
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      3 available at 2 locations
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="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"
                        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>
                    </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                      data-test="name"
                    >
                      silver
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                      data-test="sku"
                    >
                      69055-15190
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colInventory-id"
                      data-test="inventory"
                    >
                      11 available at 1 location
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colActions-id"
                      data-test="actions"
                    >
                      <div
                        data-test="menu"
                      >
                        <button
                          aria-haspopup="true"
                          aria-label="More"
                          class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
                          data-test-id="showMoreButton"
                          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
                                d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                              />
                            </svg>
                          </span>
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="edit-seo"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit website SEO
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Organize Product
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
              >
                Versatile
              </div>
              <div
                class="CardSpacer-spacer-id"
              />
              <div
                class="MuiTypography-root-id ProductOrganization-label-id MuiTypography-caption-id"
              >
                Product Type
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                Configurable
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-test="category"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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
                class="MultiAutocompleteSelectField-container-id"
                data-test="collections"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="collectionRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Taxes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductTaxes-content-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
                data-test="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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="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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Charge taxes on this product
                </span>
              </label>
              <div
                class="SingleAutocompleteSelectField-container-id ProductTaxes-select-id"
                data-test="select-tax-type"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Tax Rate
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="standard"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Edit Media
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                All Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media View
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Edit Media
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                All Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media View
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </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-settings-id"
            data-test="menu"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
            data-test="add-product"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </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 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="searchInput"
        >
          <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 />
              <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="colNameHeader"
                  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="colTypeHeader"
                  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="colAvailabilityHeader"
                  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="colPriceHeader"
                  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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          data-test-id="rowNumberSelect"
                        >
                          <div
                            aria-haspopup="listbox"
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            aria-hidden="true"
                            class="MuiSelect-nativeInput-id"
                            tabindex="-1"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </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"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </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-settings-id"
            data-test="menu"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
            data-test="add-product"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButtonGroup-disabled-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
              disabled=""
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </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 />
          <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 MuiIconButton-root-id Alert-close-id Alert-closeNoContent-id"
                data-test="close"
                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
                      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>
                </span>
              </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="searchInput"
        >
          <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 />
              <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="colNameHeader"
                  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="colTypeHeader"
                  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="colAvailabilityHeader"
                  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="colPriceHeader"
                  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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          data-test-id="rowNumberSelect"
                        >
                          <div
                            aria-haspopup="listbox"
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            aria-hidden="true"
                            class="MuiSelect-nativeInput-id"
                            tabindex="-1"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </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"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </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-settings-id"
            data-test="menu"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
            data-test="add-product"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </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 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="searchInput"
        >
          <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-text-id FilterBar-tabActionButton-id MuiButton-textPrimary-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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="colNameHeader"
                  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="colTypeHeader"
                  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="colAvailabilityHeader"
                  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="colPriceHeader"
                  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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          data-test-id="rowNumberSelect"
                        >
                          <div
                            aria-haspopup="listbox"
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            aria-hidden="true"
                            class="MuiSelect-nativeInput-id"
                            tabindex="-1"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id ProductList-link-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                >
                  <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
                          d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
                        />
                      </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="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"
                  data-test-availability="false"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    data-test-id="skeleton"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </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-settings-id"
            data-test="menu"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
            data-test="add-product"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </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 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="searchInput"
        >
          <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 />
              <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="colNameHeader"
                  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="colTypeHeader"
                  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="colAvailabilityHeader"
                  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="colPriceHeader"
                  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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          data-test-id="rowNumberSelect"
                        >
                          <div
                            aria-haspopup="listbox"
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            aria-hidden="true"
                            class="MuiSelect-nativeInput-id"
                            tabindex="-1"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </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"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  -
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="false"
                >
                  -
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </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-settings-id"
            data-test="menu"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
            data-test="add-product"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </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 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="searchInput"
        >
          <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 />
              <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="colNameHeader"
                  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="colTypeHeader"
                  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="colAvailabilityHeader"
                  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="colPriceHeader"
                  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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          data-test-id="rowNumberSelect"
                        >
                          <div
                            aria-haspopup="listbox"
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            aria-hidden="true"
                            class="MuiSelect-nativeInput-id"
                            tabindex="-1"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                  colspan="5"
                >
                  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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </div>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="PageHeader-root-id"
        >
          <div
            class="ProductListPage-settings-id"
            data-test="menu"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
            data-test="add-product"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </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 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="searchInput"
        >
          <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 />
              <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="colNameHeader"
                  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="colTypeHeader"
                  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="colAvailabilityHeader"
                  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="colPriceHeader"
                  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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          data-test-id="rowNumberSelect"
                        >
                          <div
                            aria-haspopup="listbox"
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            aria-hidden="true"
                            class="MuiSelect-nativeInput-id"
                            tabindex="-1"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </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"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Products
      </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-settings-id"
            data-test="menu"
          >
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id CardMenu-iconButton-id MuiIconButton-colorPrimary-id"
              data-test-id="showMoreButton"
              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
                    d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            class="ProductListPage-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id ColumnPickerButton-root-id MuiButton-outlinedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id ColumnPickerButton-icon-id MuiSvgIcon-colorPrimary-id"
                  focusable="false"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </svg>
              </span>
            </button>
          </div>
          <div
            aria-label="button with select"
            class="MuiButtonGroup-root-id MuiButtonGroup-contained-id"
            data-test="add-product"
            role="group"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButtonGroup-grouped-id MuiButtonGroup-groupedHorizontal-id MuiButtonGroup-groupedContained-id MuiButtonGroup-groupedContainedHorizontal-id MuiButtonGroup-groupedContainedPrimary-id MuiButton-containedPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Create Product
              </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 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="searchInput"
        >
          <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 />
              <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"
              >
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id TableCellHeader-root-id ProductList-colName-id"
                  data-test-id="colNameHeader"
                  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="colTypeHeader"
                  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="colAvailabilityHeader"
                  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="colPriceHeader"
                  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"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                  colspan="5"
                >
                  <div
                    class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    >
                      <div>
                        <span
                          class="RowNumberSelect-label-id"
                        >
                          No of Rows:
                        </span>
                        <div
                          class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                          data-test-id="rowNumberSelect"
                        >
                          <div
                            aria-haspopup="listbox"
                            class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            aria-hidden="true"
                            class="MuiSelect-nativeInput-id"
                            tabindex="-1"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        data-test="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-test="button-pagination-next"
                        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
                              d="M10 17l5-5-5-5v10z"
                            />
                          </svg>
                        </span>
                      </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"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Paint
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Juice
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Top (clothing)
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="price"
                >
                  $1.20 - $3.50
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id ProductList-link-id MuiTableRow-hover-id"
                data-test="id"
                data-test-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"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  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="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="product-type"
                >
                  Cushion
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
                  data-test="availability"
                  data-test-availability="true"
                >
                  <div
                    class="StatusLabel-container-id"
                  >
                    <div
                      class="undefined StatusLabel-successDot-id"
                    />
                    <div
                      class="StatusLabel-textContainer-id"
                    >
                      <div
                        class="MuiTypography-root-id MuiTypography-body1-id"
                      >
                        Published on 07/14/2020
                      </div>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
                  data-test="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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Extended Hard
      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiPaper-root-id MuiExpansionPanel-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
                data-test-id="channels-variant-availability-summary"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                    >
                      <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class=""
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test="button-delete-file"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Selection Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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"
                      >
                        Value
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        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"
                        role="combobox"
                      >
                        <input
                          aria-invalid="true"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="Auto Loan Account"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose media
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductVariantPrice-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id ProductVariantPrice-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 ProductVariantPrice-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-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"
                    >
                      <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=""
                              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 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="test1-channel-costPrice"
                              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 Price
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr
                      class="MuiTableRow-root-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=""
                              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 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="test2-channel-costPrice"
                              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 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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-text-id MuiButton-textPrimary-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-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
                    data-shrink="false"
                  >
                    Global threshold
                    <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      required=""
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Global threshold *
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-required-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"
                >
                  Unlimited
                </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"
                >
                  <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"
                >
                  <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"
                          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"
                >
                  <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"
                          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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Extended Hard
      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiPaper-root-id MuiExpansionPanel-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
                data-test-id="channels-variant-availability-summary"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                    >
                      <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class=""
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test="button-delete-file"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Selection Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="Auto Loan Account"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose media
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductVariantPrice-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id ProductVariantPrice-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 ProductVariantPrice-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-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"
                    >
                      <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=""
                              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 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="test1-channel-costPrice"
                              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 Price
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr
                      class="MuiTableRow-root-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=""
                              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 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="test2-channel-costPrice"
                              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 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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-text-id MuiButton-textPrimary-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-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
                    data-shrink="false"
                  >
                    Global threshold
                    <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      required=""
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Global threshold *
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-required-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"
                >
                  Unlimited
                </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"
                >
                  <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"
                >
                  <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"
                          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"
                >
                  <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"
                          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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Extended Hard
      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                      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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiPaper-root-id MuiExpansionPanel-root-id VariantDetailsChannelsAvailabilityCardExpander-root-id MuiExpansionPanel-rounded-id MuiPaper-elevation1-id MuiPaper-rounded-id"
            >
              <div
                aria-disabled="false"
                aria-expanded="false"
                class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id VariantDetailsChannelsAvailabilityCardExpanderSummary-root-id"
                data-test-id="channels-variant-availability-summary"
                role="button"
                tabindex="0"
              >
                <div
                  class="MuiExpansionPanelSummary-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 MuiExpansionPanelSummary-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"
                    >
                      <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Attachment
                  </div>
                </div>
                <div
                  class=""
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test="button-delete-file"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                  <input
                    class="FileUploadField-fileField-id"
                    data-test="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Selection Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Borders
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="BasicAttributeRow-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="BasicAttributeRow-attributeSectionLabel-id"
                  data-test="attribute-label"
                >
                  <div
                    class="MuiTypography-root-id MuiTypography-body1-id"
                  >
                    Legacy
                  </div>
                </div>
                <div
                  class=""
                  data-test="attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="Auto Loan Account"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </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>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose media
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id ProductVariantPrice-pricingContent-id"
            >
              <div
                class="MuiTypography-root-id ProductVariantPrice-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 ProductVariantPrice-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-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"
                    >
                      <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=""
                              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 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="test1-channel-costPrice"
                              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 Price
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr
                      class="MuiTableRow-root-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=""
                              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 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="test2-channel-costPrice"
                              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 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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-text-id MuiButton-textPrimary-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-outlined-id MuiFormLabel-required-id MuiInputLabel-required-id"
                    data-shrink="false"
                  >
                    Global threshold
                    <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="globalThreshold"
                      required=""
                      type="text"
                      value=""
                    />
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id"
                      >
                        <span>
                          Global threshold *
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-required-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"
                >
                  Unlimited
                </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"
                >
                  <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"
                >
                  <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"
                          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"
                >
                  <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"
                          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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            >
              <div
                class="Metadata-togglable-id"
              >
                <div
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                >
                  1 Field
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id"
                  data-test="expand"
                  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
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <table
              class="MuiTable-root-id Metadata-table-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                  data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      data-test="deleteField"
                      data-test-id="0"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
          style="width:10em"
        >
          ‌
        </span>
      </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        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>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-colAvatar-id"
                    >
                      <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
                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id"
                      colspan="3"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Add variant
                        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 Attributes-card-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Variant Selection Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 MuiIconButton-root-id Attributes-expansionBarButton-id"
                  data-test="attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <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>
                  </span>
                </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Media
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantMedia-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                There is no channel to define prices for
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Shipping
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Inventory
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                >
                  Variant currently in preorder
                </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                >
                  <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"
                >
                  <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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        data-test-id="add-warehouse"
                        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
                              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Shipping Zone
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assign-country"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-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 MuiIconButton-root-id"
                          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
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Shipping Zone
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assign-country"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-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 MuiIconButton-root-id"
                          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
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create New Shipping Zone
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-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 MuiIconButton-root-id"
                          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
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </span>
                        </button>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          DB Schenker
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Order Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id 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="noLimits"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    There are no value limits
                    <div
                      class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders of all prices
                    </div>
                  </span>
                </label>
                <div
                  class="MuiTypography-root-id OrderValue-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 OrderValue-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-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"
                    >
                      <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"
                              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"
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <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"
                    >
                      <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=""
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Postal codes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                  >
                    <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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Excluded Products
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="3"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                      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 MuiAvatar-fallback-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="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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          DB Schenker
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Order Weight
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="noLimits"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  There are no value limits
                  <div
                    class="MuiTypography-root-id OrderWeight-caption-id MuiTypography-caption-id"
                  >
                    This rate will apply to all orders
                  </div>
                </span>
              </label>
              <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="minValue"
                      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. 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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="maxValue"
                      type="number"
                      value="80"
                    />
                    <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <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"
                    >
                      <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=""
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Postal codes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                  >
                    <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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Excluded Products
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="3"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                      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 MuiAvatar-fallback-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="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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id RichTextEditor-rootDisabled-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Order Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id 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="noLimits"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id"
                  >
                    There are no value limits
                    <div
                      class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders of all prices
                    </div>
                  </span>
                </label>
                <div
                  class="MuiTypography-root-id OrderValue-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 OrderValue-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-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"
                    >
                      <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"
                              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"
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <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"
                    >
                      <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=""
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Postal codes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                  >
                    <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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Excluded Products
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id ShippingMethodProducts-table-id"
              >
                <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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                    >
                      <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
                              d="M19 8l-4 4h3c0 3.31-2.69 6-6 6-1.01 0-1.97-.25-2.8-.7l-1.46 1.46C8.97 19.54 10.43 20 12 20c4.42 0 8-3.58 8-8h3l-4-4zM6 12c0-3.31 2.69-6 6-6 1.01 0 1.97.25 2.8.7l1.46-1.46C15.03 4.46 13.57 4 12 4c-4.42 0-8 3.58-8 8H1l4 4 4-4H6z"
                            />
                          </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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          UPS
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Order Value
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id 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="noLimits"
                        type="checkbox"
                      />
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                  >
                    There are no value limits
                    <div
                      class="MuiTypography-root-id OrderValue-caption-id MuiTypography-caption-id"
                    >
                      This rate will apply to all orders of all prices
                    </div>
                  </span>
                </label>
                <div
                  class="MuiTypography-root-id OrderValue-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 OrderValue-table-id"
                >
                  <thead
                    class="MuiTableHead-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id MuiTableRow-head-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"
                    >
                      <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-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"
                              type="number"
                              value="0"
                            />
                            <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="0"
                              name="maxValue:channel"
                              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>
                                  Max Value
                                </span>
                              </legend>
                            </fieldset>
                          </div>
                        </div>
                      </td>
                    </tr>
                    <tr
                      class="MuiTableRow-root-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 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:test"
                              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:test"
                              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>
                                  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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <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"
                    >
                      <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=""
                              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"
                    >
                      <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=""
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Postal codes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                  >
                    <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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Excluded Products
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="3"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                      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 MuiAvatar-fallback-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="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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          DB Schenker
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="richTextEditor"
                data-test-id="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>
                <div
                  class="RichTextEditor-editor-id RichTextEditor-root-id"
                />
                <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Order Weight
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="noLimits"
                      type="checkbox"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  There are no value limits
                  <div
                    class="MuiTypography-root-id OrderWeight-caption-id MuiTypography-caption-id"
                  >
                    This rate will apply to all orders
                  </div>
                </span>
              </label>
              <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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="minValue"
                      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. 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"
                  >
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      min="0"
                      name="maxValue"
                      type="number"
                      value="80"
                    />
                    <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <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"
                    >
                      <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=""
                              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"
                    >
                      <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=""
                              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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Postal codes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test="add-postal-code-range"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add postal code range
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                  >
                    <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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </th>
                  </tr>
                </thead>
                <tbody
                  class="MuiTableBody-root-id"
                >
                  <tr
                    class="MuiTableRow-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Excluded Products
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign products
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                  >
                    <th
                      class="MuiTableCell-root-id MuiTableCell-head-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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </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"
                  >
                    <td
                      class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                      colspan="3"
                    >
                      <div
                        class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                      >
                        <div
                          class="TablePagination-spacer-id"
                        />
                        <div
                          class="TablePaginationActions-root-id"
                        >
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-back"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M14 7l-5 5 5 5V7z"
                                />
                              </svg>
                            </span>
                          </button>
                          <button
                            class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                            data-test="button-pagination-next"
                            disabled=""
                            tabindex="-1"
                            type="button"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <svg
                                aria-hidden="true"
                                class="MuiSvgIcon-root-id"
                                focusable="false"
                                viewBox="0 0 24 24"
                              >
                                <path
                                  d="M10 17l5-5-5-5v10z"
                                />
                              </svg>
                            </span>
                          </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"
                          >
                            <path
                              d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                            />
                          </svg>
                        </span>
                      </span>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ShippingMethodProducts-colName-id"
                      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 MuiAvatar-fallback-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="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 MuiIconButton-root-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Availability
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Europe
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assign-country"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-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 MuiIconButton-root-id"
                          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
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </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="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Price Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="add-price-rate"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Weight Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="add-weight-rate"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Settings
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="MultiAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      placeholder="Add Channel"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="remove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="remove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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
                class="MultiAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      placeholder="Select Warehouse"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="warehousesRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="warehousesRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Europe
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="assign-country"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Assign countries
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-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 MuiIconButton-root-id"
                          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
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </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="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Price Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="add-price-rate"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Weight Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  data-test-id="add-weight-rate"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Create rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                        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
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Metadata-content-id"
            />
            <div
              class="Metadata-emptyContainer-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                There is no private metadata created for this element.
              </div>
              <div
                class="MuiTypography-root-id MuiTypography-body1-id MuiTypography-colorTextSecondary-id"
              >
                Use the button below to add new metadata field
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test="addField"
                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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Settings
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="MultiAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      placeholder="Add Channel"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="remove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="remove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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
                class="MultiAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      placeholder="Select Warehouse"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="warehousesRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="warehousesRemove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id CountryList-root-id"
            >
              <div
                class="ResponsiveTable-root-id"
              >
                <table
                  class="MuiTable-root-id"
                >
                  <tbody
                    class="MuiTableBody-root-id"
                  >
                    <tr
                      class="MuiTableRow-root-id CountryList-pointer-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 MuiIconButton-root-id"
                          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
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </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="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Price Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Weight Based Rates
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ResponsiveTable-root-id"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <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>
                        </span>
                      </button>
                    </td>
                    <td
                      class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id ShippingZoneRates-buttonColumn-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                            />
                          </svg>
                        </span>
                      </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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="false"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="metadataEditor"
            data-test-expanded="true"
            data-test-is-private="true"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Private Metadata
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Settings
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                class="MultiAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      placeholder="Add Channel"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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
                class="MultiAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      placeholder="Select Warehouse"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Shipping
      </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="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping By Zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="add-shipping-zone"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="4"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                            data-test-id="rowNumberSelect"
                          >
                            <div
                              aria-haspopup="listbox"
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              aria-hidden="true"
                              class="MuiSelect-nativeInput-id"
                              tabindex="-1"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-test="button-pagination-next"
                          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
                                d="M10 17l5-5-5-5v10z"
                              />
                            </svg>
                          </span>
                        </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div>
        <form>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                >
                  Shipping Weight Unit
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby="mui-component-select-unit"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                    id="mui-component-select-unit"
                    role="button"
                    tabindex="0"
                  >
                    KG
                  </div>
                  <input
                    aria-hidden="true"
                    class="MuiSelect-nativeInput-id"
                    name="unit"
                    tabindex="-1"
                    value="KG"
                  />
                  <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"
                >
                  This unit will be used as default shipping weight
                </p>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="saveUnit"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Save
                </span>
              </button>
            </div>
          </div>
        </form>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Shipping
      </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="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping By Zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="add-shipping-zone"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="4"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                            data-test-id="rowNumberSelect"
                          >
                            <div
                              aria-haspopup="listbox"
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              aria-hidden="true"
                              class="MuiSelect-nativeInput-id"
                              tabindex="-1"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-next"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                            </svg>
                          </span>
                        </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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </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 MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div>
        <form>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping Weight Unit
                </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-unit"
                    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-unit"
                    role="button"
                  >
                    KG
                  </div>
                  <input
                    aria-hidden="true"
                    class="MuiSelect-nativeInput-id"
                    name="unit"
                    tabindex="-1"
                    value="KG"
                  />
                  <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>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id MuiFormHelperText-filled-id"
                >
                  This unit will be used as default shipping weight
                </p>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="saveUnit"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Save
                </span>
              </button>
            </div>
          </div>
        </form>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Shipping
      </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="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping By Zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="add-shipping-zone"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="3"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                            data-test-id="rowNumberSelect"
                          >
                            <div
                              aria-haspopup="listbox"
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              aria-hidden="true"
                              class="MuiSelect-nativeInput-id"
                              tabindex="-1"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-test="button-pagination-next"
                          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
                                d="M10 17l5-5-5-5v10z"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="3"
                  >
                    No shipping zones found
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      <div>
        <form>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                >
                  Shipping Weight Unit
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    aria-haspopup="listbox"
                    aria-labelledby="mui-component-select-unit"
                    class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-outlined-id MuiInputBase-input-id MuiOutlinedInput-input-id"
                    id="mui-component-select-unit"
                    role="button"
                    tabindex="0"
                  >
                    KG
                  </div>
                  <input
                    aria-hidden="true"
                    class="MuiSelect-nativeInput-id"
                    name="unit"
                    tabindex="-1"
                    value="KG"
                  />
                  <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"
                >
                  This unit will be used as default shipping weight
                </p>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="saveUnit"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Save
                </span>
              </button>
            </div>
          </div>
        </form>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Shipping
      </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="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Shipping By Zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                data-test-id="add-shipping-zone"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Create shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="ResponsiveTable-root-id"
          >
            <table
              class="MuiTable-root-id"
            >
              <thead
                class="MuiTableHead-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-head-id"
                >
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                    colspan="4"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      >
                        <div>
                          <span
                            class="RowNumberSelect-label-id"
                          >
                            No of Rows:
                          </span>
                          <div
                            class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                            data-test-id="rowNumberSelect"
                          >
                            <div
                              aria-haspopup="listbox"
                              class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              aria-hidden="true"
                              class="MuiSelect-nativeInput-id"
                              tabindex="-1"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                          data-test="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-test="button-pagination-next"
                          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
                                d="M10 17l5-5-5-5v10z"
                              />
                            </svg>
                          </span>
                        </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <input
                          class="PrivateSwitchBase-input-id"
                          data-indeterminate="false"
                          type="checkbox"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                          />
                        </svg>
                      </span>
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                  >
                    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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                      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
                            d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                          />
                        </svg>
                      </span>
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          General Information
        </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"
          >
            Site Settings
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
              >
                Name of your store
              </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="Saleor e-commerce"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Name of your store
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                Name of your store is shown on tab in web browser
              </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"
              >
                Store domain
              </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="domain"
                  type="text"
                  value="localhost:8000"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Store domain
                    </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"
              >
                Store description
              </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="description"
                  type="text"
                  value="Lorem ipsum dolor sit amet"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Store description
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
              >
                Store description is shown on taskbar after your store name
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Company Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This adress will be used to generate invoices and calculate shipping rates.Email adress you provide here will be used as a contact adress for your customers.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Store Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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
                  class="SingleAutocompleteSelectField-container-id"
                  data-test-id="address-edit-country-select-field"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id 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"
                    >
                      Country
                    </label>
                    <div
                      aria-autocomplete="list"
                      aria-expanded="false"
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      role="combobox"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="none"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        type="text"
                        value="UA"
                      />
                      <div
                        class="SingleAutocompleteSelectField-adornment-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          General Information
        </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"
          >
            Site Settings
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-error-id MuiInputLabel-error-id MuiFormLabel-filled-id"
                data-shrink="true"
              >
                Name of your store
              </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="Saleor e-commerce"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Name of your store
                    </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"
              >
                Store domain
              </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="domain"
                  type="text"
                  value="localhost:8000"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Store domain
                    </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"
              >
                Store description
              </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="description"
                  type="text"
                  value="Lorem ipsum dolor sit amet"
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                  >
                    <span>
                      Store description
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Invalid value
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Company Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This adress will be used to generate invoices and calculate shipping rates.Email adress you provide here will be used as a contact adress for your customers.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Store Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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
                  class="SingleAutocompleteSelectField-container-id"
                  data-test-id="address-edit-country-select-field"
                >
                  <div
                    class="MuiFormControl-root-id MuiTextField-root-id 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"
                    >
                      Country
                    </label>
                    <div
                      aria-autocomplete="list"
                      aria-expanded="false"
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                      role="combobox"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="none"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        type="text"
                        value="UA"
                      />
                      <div
                        class="SingleAutocompleteSelectField-adornment-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </div>
                      <fieldset
                        aria-hidden="true"
                        class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      >
                        <legend
                          class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          General Information
        </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"
          >
            Site Settings
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            These are general information about your store. They define what is the URL of your store and what is shown in browsers taskbar.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              General Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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-outlined-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id"
                data-shrink="false"
              >
                Name of your store
              </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>
                      Name of your store
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              >
                Name of your store is shown on tab in web browser
              </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"
              >
                Store domain
              </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="domain"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Store domain
                    </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"
              >
                Store description
              </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="description"
                  type="text"
                  value=""
                />
                <fieldset
                  aria-hidden="true"
                  class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                >
                  <legend
                    class="PrivateNotchedOutline-legendLabelled-id"
                  >
                    <span>
                      Store description
                    </span>
                  </legend>
                </fieldset>
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
              >
                Store description is shown on taskbar after your store name
              </p>
            </div>
          </div>
        </div>
        <hr
          class="Hr-root-id SiteSettingsPage-hr-id"
        />
        <div>
          <div
            class="MuiTypography-root-id MuiTypography-body1-id"
          >
            Company Information
          </div>
          <div
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            This adress will be used to generate invoices and calculate shipping rates.Email adress you provide here will be used as a contact adress for your customers.
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiCard-root-id CompanyAddressInput-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
            >
              Store Information
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <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
                  class="SingleAutocompleteSelectField-container-id"
                  data-test-id="address-edit-country-select-field"
                >
                  <div
                    class="MuiFormControl-root-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
                      aria-autocomplete="list"
                      aria-expanded="false"
                      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"
                      role="combobox"
                    >
                      <input
                        aria-invalid="false"
                        autocomplete="none"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        type="text"
                        value=""
                      />
                      <div
                        class="SingleAutocompleteSelectField-adornment-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Jacob Smith
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Staff Member Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        >
                          E-mail 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>
                                E-mail Address
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                User is assigned to:
              </div>
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-test="permissionGroups"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test-id="remove"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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 MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      data-test-id="remove"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <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>
                      </span>
                    </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                App Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                If you want to disable this App 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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </svg>
                  </span>
                </span>
                <span
                  class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id"
                >
                  User is active
                </span>
              </label>
            </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Jacob Smith
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Staff Member Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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 photo
                      </div>
                      <div
                        class="MuiTypography-root-id StaffProperties-avatarActionText-id MuiTypography-body1-id"
                      >
                        Delete photo
                      </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"
                        >
                          E-mail 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>
                                E-mail 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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Password
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Change your password
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Preferences
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-id 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"
                  >
                    Preferred Language
                  </label>
                  <div
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="English"
                    />
                    <div
                      class="SingleAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                    <fieldset
                      aria-hidden="true"
                      class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    >
                      <legend
                        class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                      >
                        <span>
                          Preferred Language
                        </span>
                      </legend>
                    </fieldset>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Staff Member Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        >
                          E-mail 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>
                                E-mail Address
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body1-id"
              >
                User is assigned to:
              </div>
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-test="permissionGroups"
              >
                <div
                  class="MuiFormControl-root-id MuiTextField-root-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
                    aria-autocomplete="list"
                    aria-expanded="false"
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div
                      class="MultiAutocompleteSelectField-adornment-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </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
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiCard-root-id MuiPaper-elevation0-id MuiPaper-rounded-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                App Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                If you want to disable this App 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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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>
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Jacob Smith
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Staff Member Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        >
                          E-mail 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>
                                E-mail Address
                              </span>
                            </legend>
                          </fieldset>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div />
      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Staff Members
      </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="inviteStaffMember"
            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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Staff Members
      </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="inviteStaffMember"
            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 />
          <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 MuiIconButton-root-id Alert-close-id Alert-closeNoContent-id"
                data-test="close"
                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
                      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>
                </span>
              </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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Staff Members
      </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="inviteStaffMember"
            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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Staff Members
      </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="inviteStaffMember"
            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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Taxes
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-9 14l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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"
            >
              <table
                class="MuiTable-root-id"
              >
                <thead
                  class="MuiTableHead-root-id"
                >
                  <tr
                    class="MuiTableRow-root-id MuiTableRow-head-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Taxes
        </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Configuration
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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"
                    >
                      <path
                        d="M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z"
                      />
                    </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>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id MuiCardActions-spacing-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-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"
                  >
                    <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Tax Rates in Austria
      </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"
                >
                  <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"
                >
                  <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"
                >
                  <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"
                >
                  <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"
                >
                  <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"
                >
                  <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"
                >
                  <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"
                >
                  <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"
                >
                  <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        <span
          class="Skeleton-skeleton-id"
          data-test-id="skeleton"
          style="width:10em"
        >
          ‌
        </span>
      </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"
                >
                  <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"
                >
                  <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Translations to English
      </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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="2"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Languages
      </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"
            >
              <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Languages
      </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"
            >
              <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Languages
      </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"
            >
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id"
                scope="col"
              >
                Language
              </th>
            </tr>
          </thead>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Warehouse
        </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="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="none"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Warehouse
        </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="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                  >
                    <div
                      class="MuiFormControl-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        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"
                        role="combobox"
                      >
                        <input
                          aria-invalid="true"
                          autocomplete="none"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          Create Warehouse
        </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="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                  >
                    <div
                      class="MuiFormControl-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        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"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="none"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          disabled=""
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          C our wares
        </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="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                >
                  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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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"
                      >
                        Country
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="none"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="Szwecja"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Settings
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  Europe
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  Oceania
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  Asia
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  Americas
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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>
              <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          C our wares
        </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="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                  >
                    <div
                      class="MuiFormControl-root-id MuiTextField-root-id 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"
                      >
                        Country
                      </label>
                      <div
                        aria-autocomplete="list"
                        aria-expanded="false"
                        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"
                        role="combobox"
                      >
                        <input
                          aria-invalid="true"
                          autocomplete="none"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="Szwecja"
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                        <fieldset
                          aria-hidden="true"
                          class="PrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        >
                          <legend
                            class="PrivateNotchedOutline-legendLabelled-id PrivateNotchedOutline-legendNotched-id"
                          >
                            <span>
                              Country
                            </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="MuiFormControl-root-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Settings
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  Europe
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  Oceania
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  Asia
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  Americas
                </a>
              </div>
              <div
                class="WarehouseInfoProps-link-id"
              >
                <a
                  class="MuiTypography-root-id Link-root-id Link-primary-id Link-underline-id MuiTypography-body1-id"
                >
                  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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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>
              <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
        >
          <span
            class="Skeleton-skeleton-id"
            data-test-id="skeleton"
            style="width:10em"
          >
            ‌
          </span>
        </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="generalInformationSection"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                General Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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
                    class="SingleAutocompleteSelectField-container-id"
                    data-test-id="address-edit-country-select-field"
                  >
                    <div
                      class="MuiFormControl-root-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
                        aria-autocomplete="list"
                        aria-expanded="false"
                        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"
                        role="combobox"
                      >
                        <input
                          aria-invalid="false"
                          autocomplete="none"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          disabled=""
                          type="text"
                          value=""
                        />
                        <div
                          class="SingleAutocompleteSelectField-adornment-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </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="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id CardTitle-title-id MuiTypography-h5-id"
              >
                Settings
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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>
              <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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id PrivateRadioButtonIcon-checked-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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"
                        />
                        <div
                          class="PrivateRadioButtonIcon-root-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
                            />
                          </svg>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id PrivateRadioButtonIcon-layer-id"
                            focusable="false"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M8.465 8.465C9.37 7.56 10.62 7 12 7C14.76 7 17 9.24 17 12C17 13.38 16.44 14.63 15.535 15.535C14.63 16.44 13.38 17 12 17C9.24 17 7 14.76 7 12C7 10.62 7.56 9.37 8.465 8.465Z"
                            />
                          </svg>
                        </div>
                      </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Warehouses
      </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>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="createWarehouse"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="cour wares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                C our wares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="bestocked"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                Be stocked
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="awarehouse"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                A Warehouse
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="darkwares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                Darkwares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Warehouses
      </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>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-disabled-id MuiButtonBase-disabled-id"
            data-test-id="createWarehouse"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </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 />
          <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 MuiIconButton-root-id Alert-close-id Alert-closeNoContent-id"
                data-test="close"
                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
                      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>
                </span>
              </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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="cour wares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                C our wares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="bestocked"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                Be stocked
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="awarehouse"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                A Warehouse
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="darkwares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                Darkwares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Warehouses
      </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>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="createWarehouse"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id"
              data-test="warehouseEntry"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="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="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Warehouses
      </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>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id"
            data-test-id="createWarehouse"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id"
              data-test="emptyListMessage"
            >
              <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="MuiTypography-root-id PageHeader-title-id MuiTypography-h5-id"
      >
        Warehouses
      </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="createWarehouse"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create Warehouse
            </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 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="searchInput"
        >
          <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"
            >
              <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"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-footer-id TablePagination-root-id"
                colspan="3"
              >
                <div
                  class="MuiToolbar-root-id MuiToolbar-regular-id TablePagination-toolbar-id MuiToolbar-gutters-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  >
                    <div>
                      <span
                        class="RowNumberSelect-label-id"
                      >
                        No of Rows:
                      </span>
                      <div
                        class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id RowNumberSelect-select-id"
                        data-test-id="rowNumberSelect"
                      >
                        <div
                          aria-haspopup="listbox"
                          class="MuiSelect-root-id MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          aria-hidden="true"
                          class="MuiSelect-nativeInput-id"
                          tabindex="-1"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id MuiIconButton-disabled-id MuiButtonBase-disabled-id"
                      data-test="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-test="button-pagination-next"
                      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
                            d="M10 17l5-5-5-5v10z"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="cour wares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                C our wares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="bestocked"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                Be stocked
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="awarehouse"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                A Warehouse
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id WarehouseList-tableRow-id MuiTableRow-hover-id"
              data-test="warehouseEntry"
              data-testid="darkwares"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colName-id"
                data-test="name"
              >
                Darkwares
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id WarehouseList-colZones-id"
                data-test="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 MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    data-test="editButton"
                    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
                          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>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id"
                    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
                          d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</div>
`;