// 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 / Delete multiple attributes default 1`] = `
<div
  style="padding:24px"
/>
`;

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

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

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

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

exports[`Storyshots Generics / AddressEdit default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;width:768px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
              data-shrink="true"
            >
              First Name
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="firstName"
                type="text"
                value="Elizabeth"
              />
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
              data-shrink="true"
            >
              Last Name
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="lastName"
                type="text"
                value="Vaughn"
              />
            </div>
          </div>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="MuiFormControl-root-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="companyName"
                type="text"
                value=""
              />
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="phone"
                type="text"
                value=""
              />
            </div>
          </div>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
          data-shrink="true"
        >
          Address line 1
        </label>
        <div
          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
            name="streetAddress1"
            type="text"
            value="419 Ruiz Orchard Apt. 199"
          />
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="MuiFormControl-root-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
            name="streetAddress2"
            type="text"
            value=""
          />
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
              data-shrink="true"
            >
              City
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="city"
                type="text"
                value="Port Danielshire"
              />
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
              data-shrink="true"
            >
              ZIP / Postal code
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="postalCode"
                type="text"
                value="52203"
              />
            </div>
          </div>
        </div>
      </div>
      <div
        class="FormSpacer-spacer-id"
      />
      <div
        class="AddressEdit-root-id"
      >
        <div>
          <div
            class="SingleAutocompleteSelectField-container-id"
          >
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  autocomplete="off"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                  type="text"
                  value="Szwecja"
                />
                <div>
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <g
                      style="fill-rule:evenodd"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </g>
                  </svg>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiFormControl-root-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                name="countryArea"
                type="text"
                value=""
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Generics / AddressFormatter when loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <span
        class="Skeleton-skeleton-id"
      >
        ‌
      </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="AutocompleteSelectMenu-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
            data-shrink="true"
          >
            Autocomplete Menu
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              placeholder="Start typing to search ..."
              type="text"
              value="Item 1.2"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Autocomplete Menu error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="AutocompleteSelectMenu-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="true"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              placeholder="Start typing to search ..."
              type="text"
              value="Item 1.2"
            />
          </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="AutocompleteSelectMenu-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
              data-shrink="true"
            >
              Autocomplete Menu
            </label>
            <div
              class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                placeholder="Start typing to search ..."
                type="text"
                value="Item 1.2"
              />
            </div>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Autocomplete Menu loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="AutocompleteSelectMenu-container-id"
      >
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
        >
          <label
            class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
            data-shrink="true"
          >
            Autocomplete Menu
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
              placeholder="Start typing to search ..."
              type="text"
              value="Item 1.2"
            />
            <div
              class="MuiCircularProgress-root-id MuiCircularProgress-colorPrimary-id MuiCircularProgress-indeterminate-id"
              role="progressbar"
              style="width:16px;height:16px"
            >
              <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>
  </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 MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
      tabindex="0"
      type="button"
    >
      <span
        class="MuiIconButton-label-id"
      >
        <svg
          aria-hidden="true"
          class="MuiSvgIcon-root-id"
          focusable="false"
          role="presentation"
          viewBox="0 0 24 24"
        >
          <path
            d="M0 0h24v24H0z"
            fill="none"
          />
          <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 / Checkbox checked 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id Checkbox-root-id"
        tabindex="0"
        type="button"
      >
        <input
          class="Checkbox-box-id Checkbox-checked-id"
          name="data"
          type="checkbox"
          value="true"
        />
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Checkbox disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
        disabled=""
        tabindex="-1"
        type="button"
      >
        <input
          class="Checkbox-box-id Checkbox-disabled-id"
          disabled=""
          name="data"
          type="checkbox"
          value="false"
        />
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Checkbox interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <button
          class="MuiButtonBase-root-id Checkbox-root-id"
          tabindex="0"
          type="button"
        >
          <input
            class="Checkbox-box-id"
            name="data"
            type="checkbox"
            value="false"
          />
        </button>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Checkbox unchecked 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id Checkbox-root-id"
        tabindex="0"
        type="button"
      >
        <input
          class="Checkbox-box-id"
          name="data"
          type="checkbox"
          value="false"
        />
      </button>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Checkbox undeterminate 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id Checkbox-root-id"
        tabindex="0"
        type="button"
      >
        <input
          class="Checkbox-box-id Checkbox-indeterminate-id"
          name="data"
          type="checkbox"
          value="false"
        />
      </button>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Generics / Chip with x 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="Chip-root-id"
      >
        <span
          class="MuiTypography-root-id MuiTypography-caption-id Chip-label-id"
        >
          Lorem Ipsum
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id Chip-closeIcon-id"
            focusable="false"
            role="presentation"
            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"
            />
            <path
              d="M0 0h24v24H0z"
              fill="none"
            />
          </svg>
        </span>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Column picker default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiButton-outlinedPrimary-id ColumnPickerButton-root-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Columns
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id ColumnPickerButton-icon-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Column picker loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiButton-outlinedPrimary-id ColumnPickerButton-root-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Columns
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id ColumnPickerButton-icon-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Date default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      Apr 7, 2018 6:44 AM
    </div>
  </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id EditableTableCell-text-id"
              >
                Some editable text
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              Some value
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / ErrorMessageCard default 1`] = `
<div
  class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
>
  <div
    class="MuiCardContent-root-id"
  >
    <h2
      class="MuiTypography-root-id MuiTypography-h5-id"
    >
      Error
    </h2>
    <p
      class="MuiTypography-root-id MuiTypography-body2-id"
    >
      Loren ipsum dolor sit amet!
    </p>
  </div>
</div>
`;

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

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

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

exports[`Storyshots Generics / Global messages default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-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 undo action 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-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 / Money formatting default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      €14.00
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Money range from 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      to $10.60
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiAutocompleteSelectField with custom option 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-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"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <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>
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </svg>
            </div>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
          >
            Value: Afghanistan
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-caption-id MultiAutocompleteSelectField-chipLabel-id"
            >
              Afghanistan
            </span>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                  focusable="false"
                  role="presentation"
                  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"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiAutocompleteSelectField with loaded data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-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"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <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>
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <g
                  style="fill-rule:evenodd"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                </g>
              </svg>
            </div>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
          >
            Value: Afghanistan
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-caption-id MultiAutocompleteSelectField-chipLabel-id"
            >
              Afghanistan
            </span>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                  focusable="false"
                  role="presentation"
                  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"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiAutocompleteSelectField with loading data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MultiAutocompleteSelectField-container-id"
      >
        <div
          class="MuiFormControl-root-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"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <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>
              <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>
          </div>
          <p
            class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
          >
            Value: Afghanistan
          </p>
        </div>
      </div>
      <div
        class="MultiAutocompleteSelectField-chipContainer-id"
      >
        <div
          class="MultiAutocompleteSelectField-chip-id"
        >
          <div
            class="MultiAutocompleteSelectField-chipInner-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-caption-id MultiAutocompleteSelectField-chipLabel-id"
            >
              Afghanistan
            </span>
            <button
              class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                  focusable="false"
                  role="presentation"
                  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"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField interactive 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="MuiFormControl-root-id MultiSelectField-formControl-id"
        >
          <label
            class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-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
              class="MuiSelect-root-id"
            >
              <div
                aria-haspopup="true"
                aria-pressed="false"
                class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
                id="select-data"
                role="button"
                tabindex="0"
              >
                Apparel
              </div>
              <input
                name="data"
                type="hidden"
                value="1"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSelect-icon-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </svg>
            </div>
          </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField with label and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / MultiSelectField with value 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              Apparel
            </div>
            <input
              type="hidden"
              value="1"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Generics / PageHeader with title 1`] = `
<div
  style="padding:24px"
>
  <div
    class="ExtendedPageHeader-root-id"
  >
    <h5
      class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
    >
      Lorem ipsum
    </h5>
    <div
      class="ExtendedPageHeader-action-id"
    >
      <div
        class="Component-root-id"
      />
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / PageHeader with title icon bar 1`] = `
<div
  style="padding:24px"
>
  <div
    class="ExtendedPageHeader-root-id"
  >
    <h5
      class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
    >
      Lorem ipsum
    </h5>
    <div
      class="ExtendedPageHeader-action-id"
    >
      <div
        class="Component-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"
              role="presentation"
              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"
              />
              <path
                d="M0 0h24v24H0z"
                fill="none"
              />
            </svg>
          </span>
        </button>
      </div>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Generics / Percent formatting default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
            data-shrink="true"
          />
          <div
            class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <div
              class="MuiSelect-root-id"
            >
              <div
                aria-haspopup="true"
                aria-pressed="false"
                class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
                id="select-phone_prefix"
                role="button"
                tabindex="0"
              >
                +41
              </div>
              <input
                name="phone_prefix"
                type="hidden"
                value="41"
              />
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id MuiSelect-icon-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M7 10l5 5 5-5z"
                />
              </svg>
            </div>
          </div>
        </div>
        <div
          class="MuiFormControl-root-id"
        >
          <label
            class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
            data-shrink="true"
          >
             
          </label>
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id"
              name="phone_number"
              type="text"
              value="123 987 456"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input disabled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            disabled=""
            name="price"
            type="number"
          />
          <span />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with currency symbol 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="price"
            type="number"
          />
          <div
            class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              $
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="price"
            type="number"
          />
          <span />
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="price"
            type="number"
          />
          <span />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with label and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="price"
            type="number"
          />
          <span />
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0.01px"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="price"
            type="number"
          />
          <span />
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Price input with value 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="price"
            type="number"
            value="30"
          />
          <span />
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="true"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="price"
            type="number"
            value="30"
          />
          <div
            class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              $
            </p>
          </div>
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
      >
        <label
          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
        >
          <fieldset
            aria-hidden="true"
            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
            style="padding-left:8px"
          >
            <legend
              class="MuiPrivateNotchedOutline-legend-id"
              style="width:0"
            >
              <span>
                ​
              </span>
            </legend>
          </fieldset>
          <input
            aria-invalid="false"
            class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
            name="price"
            type="number"
            value="30"
          />
          <div
            class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              $
            </p>
          </div>
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="RichTextEditor-root-id RichTextEditor-scroll-id"
      >
        <div
          class="RichTextEditor-input-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
          >
            Content
          </span>
          <div
            class="Draftail-Editor Draftail-Editor--hide-placeholder"
          >
            <div
              class="Draftail-Toolbar"
              role="toolbar"
            >
              <div
                class="Draftail-ToolbarGroup"
              >
                <button
                  aria-label="Bold
Ctrl + B"
                  class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                  data-draftail-balloon="true"
                  name="BOLD"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                    />
                  </svg>
                </button>
                <button
                  aria-label="Italic
Ctrl + I"
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="ITALIC"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                    />
                  </svg>
                </button>
                <button
                  aria-label="Strikethrough
Ctrl + ⇧ + X"
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="STRIKETHROUGH"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                    />
                  </svg>
                </button>
              </div>
              <div
                class="Draftail-ToolbarGroup"
              >
                <button
                  aria-label="Heading 1
#"
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="header-one"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                    />
                    <path
                      d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                    />
                  </svg>
                </button>
                <button
                  aria-label="Heading 2
##"
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="header-two"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                    />
                    <path
                      d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                    />
                  </svg>
                </button>
                <button
                  aria-label="Heading 3
###"
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="header-three"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                    />
                    <path
                      d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                    />
                  </svg>
                </button>
                <button
                  aria-label="Blockquote
>"
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="blockquote"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                    />
                  </svg>
                </button>
                <button
                  aria-label="Bulleted list
-"
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="unordered-list-item"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                    />
                  </svg>
                </button>
                <button
                  aria-label="Numbered list
1."
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="ordered-list-item"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                    />
                  </svg>
                </button>
              </div>
              <div
                class="Draftail-ToolbarGroup"
              >
                <button
                  aria-label="Line break
⇧ + ↵"
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="BR"
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="Draftail-ToolbarButton__label"
                  >
                    ↵
                  </span>
                </button>
              </div>
              <div
                class="Draftail-ToolbarGroup"
              >
                <button
                  aria-label="Link
Ctrl + K"
                  class="Draftail-ToolbarButton"
                  data-draftail-balloon="true"
                  name="LINK"
                  tabindex="-1"
                  type="button"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                    />
                  </svg>
                </button>
              </div>
            </div>
            <div
              class="DraftEditor-root"
            >
              <div
                class="DraftEditor-editorContainer"
              >
                <div
                  aria-describedby="placeholder-testKey"
                  class="notranslate public-DraftEditor-content"
                  contenteditable="true"
                  role="textbox"
                  spellcheck="false"
                  style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                >
                  <div
                    data-contents="true"
                  >
                    <div
                      class="Draftail-block--unstyled "
                      data-block="true"
                      data-editor="testKey"
                      data-offset-key="rosn-0-0"
                    >
                      <div
                        class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                        data-offset-key="rosn-0-0"
                      >
                        <span
                          data-offset-key="rosn-0-0"
                          style="font-weight:bold"
                        >
                          <span
                            data-text="true"
                          >
                            bold
                          </span>
                        </span>
                      </div>
                    </div>
                    <div
                      class="Draftail-block--unstyled "
                      data-block="true"
                      data-editor="testKey"
                      data-offset-key="6tbch-0-0"
                    >
                      <div
                        class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                        data-offset-key="6tbch-0-0"
                      >
                        <span
                          data-offset-key="6tbch-0-0"
                          style="font-style:italic"
                        >
                          <span
                            data-text="true"
                          >
                            italic
                          </span>
                        </span>
                      </div>
                    </div>
                    <div
                      class="Draftail-block--unstyled "
                      data-block="true"
                      data-editor="testKey"
                      data-offset-key="1p044-0-0"
                    >
                      <div
                        class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                        data-offset-key="1p044-0-0"
                      >
                        <span
                          data-offset-key="1p044-0-0"
                          style="text-decoration:line-through"
                        >
                          <span
                            data-text="true"
                          >
                            strikethrough
                          </span>
                        </span>
                      </div>
                    </div>
                    <h1
                      class="Draftail-block--header-one "
                      data-block="true"
                      data-editor="testKey"
                      data-offset-key="aven6-0-0"
                    >
                      <div
                        class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                        data-offset-key="aven6-0-0"
                      >
                        <span
                          data-offset-key="aven6-0-0"
                        >
                          <span
                            data-text="true"
                          >
                            h1
                          </span>
                        </span>
                      </div>
                    </h1>
                    <h2
                      class="Draftail-block--header-two "
                      data-block="true"
                      data-editor="testKey"
                      data-offset-key="9rabl-0-0"
                    >
                      <div
                        class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                        data-offset-key="9rabl-0-0"
                      >
                        <span
                          data-offset-key="9rabl-0-0"
                        >
                          <span
                            data-text="true"
                          >
                            h2
                          </span>
                        </span>
                      </div>
                    </h2>
                    <h3
                      class="Draftail-block--header-three "
                      data-block="true"
                      data-editor="testKey"
                      data-offset-key="bv0ac-0-0"
                    >
                      <div
                        class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                        data-offset-key="bv0ac-0-0"
                      >
                        <span
                          data-offset-key="bv0ac-0-0"
                        >
                          <span
                            data-text="true"
                          >
                            h3
                          </span>
                        </span>
                      </div>
                    </h3>
                    <blockquote
                      class="Draftail-block--blockquote "
                      data-block="true"
                      data-editor="testKey"
                      data-offset-key="2ip7q-0-0"
                    >
                      <div
                        class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                        data-offset-key="2ip7q-0-0"
                      >
                        <span
                          data-offset-key="2ip7q-0-0"
                        >
                          <span
                            data-text="true"
                          >
                            blockquote
                          </span>
                        </span>
                      </div>
                    </blockquote>
                    <ul
                      class="public-DraftStyleDefault-ul"
                      data-offset-key="8r8ss-0-0"
                    >
                      <li
                        class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                        data-block="true"
                        data-editor="testKey"
                        data-offset-key="8r8ss-0-0"
                      >
                        <div
                          class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                          data-offset-key="8r8ss-0-0"
                        >
                          <span
                            data-offset-key="8r8ss-0-0"
                          >
                            <span
                              data-text="true"
                            >
                              ul
                            </span>
                          </span>
                        </div>
                      </li>
                    </ul>
                    <ol
                      class="public-DraftStyleDefault-ol"
                      data-offset-key="911hc-0-0"
                    >
                      <li
                        class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                        data-block="true"
                        data-editor="testKey"
                        data-offset-key="911hc-0-0"
                      >
                        <div
                          class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                          data-offset-key="911hc-0-0"
                        >
                          <span
                            data-offset-key="911hc-0-0"
                          >
                            <span
                              data-text="true"
                            >
                              ol
                            </span>
                          </span>
                        </div>
                      </li>
                    </ol>
                    <div
                      class="Draftail-block--unstyled "
                      data-block="true"
                      data-editor="testKey"
                      data-offset-key="5aejo-0-0"
                    >
                      <div
                        class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                        data-offset-key="5aejo-0-0"
                      >
                        <span
                          data-offset-key="5aejo-0-0"
                        >
                          <span
                            data-text="true"
                          >
                            link
                          </span>
                        </span>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

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

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

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

exports[`Storyshots Generics / SaveButtonBar interactive error 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Generics / SaveButtonBar interactive success 1`] = `
<div
  style="padding:24px"
/>
`;

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

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

exports[`Storyshots Generics / SingleAutocompleteSelectField with custom option 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <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>
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </svg>
              </div>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              Value: afghanistan
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleAutocompleteSelectField with loaded data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <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>
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <g
                    style="fill-rule:evenodd"
                  >
                    <path
                      d="M7 10l5 5 5-5z"
                    />
                  </g>
                </svg>
              </div>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              Value: afghanistan
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleAutocompleteSelectField with loading data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <form>
        <div
          class="SingleAutocompleteSelectField-container-id"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <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>
                <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>
            </div>
            <p
              class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
            >
              Value: afghanistan
            </p>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with error hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        />
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-error-id MuiFilledInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        />
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-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
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / SingleSelectField with label and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-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
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-filled-id"
          data-shrink="false"
        />
        <div
          class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
        >
          <div
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              <span>
                ​
              </span>
            </div>
            <input
              type="hidden"
              value=""
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Generics / SingleSelectField with value, label and hint 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="MuiFormControl-root-id SingleSelectField-formControl-id"
      >
        <label
          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-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
            class="MuiSelect-root-id"
          >
            <div
              aria-haspopup="true"
              aria-pressed="false"
              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
              role="button"
              tabindex="0"
            >
              Apparel
            </div>
            <input
              type="hidden"
              value="1"
            />
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSelect-icon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
            </svg>
          </div>
        </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <span
        class="Skeleton-skeleton-id"
      >
        ‌
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / StatusLabel when error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
      >
        Example label
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / StatusLabel when neutral 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
      >
        Example label
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / StatusLabel when success 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="StatusLabel-root-id undefined StatusLabel-successDot-id"
      >
        Example label
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / TablePagination both previous and next pages are available 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-back"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / TablePagination next page available 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / TablePagination no previous / next page 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / TablePagination previous page available 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;width:400px"
  >
    <div
      class="MuiCardContent-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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-back"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

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

exports[`Storyshots Generics / Timeline with expansion panels 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Timeline-root-id"
  >
    <div
      class="Component-root-id"
    >
      <span
        class="Component-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiExpansionPanel-root-id MuiExpansionPanel-rounded-id Component-panel-id"
      >
        <div
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Expansion panel 1
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Component-dateExpander-id"
            >
              Expansion panel 1
            </p>
          </div>
          <div
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-expandIcon-id"
            role="button"
            tabindex="-1"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="MuiCollapse-container-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                class="MuiExpansionPanelDetails-root-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Component-root-id"
    >
      <span
        class="Component-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiExpansionPanel-root-id MuiExpansionPanel-rounded-id Component-panel-id"
      >
        <div
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Expansion panel 2
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Component-dateExpander-id"
            >
              Expansion panel 2
            </p>
          </div>
          <div
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-expandIcon-id"
            role="button"
            tabindex="-1"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="MuiCollapse-container-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                class="MuiExpansionPanelDetails-root-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="Component-root-id"
    >
      <span
        class="Component-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiExpansionPanel-root-id MuiExpansionPanel-rounded-id Component-panel-id"
      >
        <div
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Expansion panel 3
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Component-dateExpander-id"
            >
              Expansion panel 3
            </p>
          </div>
          <div
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-expandIcon-id"
            role="button"
            tabindex="-1"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="MuiCollapse-container-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                class="MuiExpansionPanelDetails-root-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                </p>
              </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="Component-root-id"
    >
      <span
        class="Component-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiExpansionPanel-root-id MuiExpansionPanel-rounded-id Component-panel-id"
      >
        <div
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Expansion panel 1
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Component-dateExpander-id"
            >
              Expansion panel 1
            </p>
          </div>
          <div
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-expandIcon-id"
            role="button"
            tabindex="-1"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="MuiCollapse-container-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                class="MuiExpansionPanelDetails-root-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div
      class="TimelineNote-root-id"
    >
      <div
        class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineNote-avatar-id"
        style="background:#f44336"
      >
        <svg
          aria-hidden="true"
          class="MuiSvgIcon-root-id"
          focusable="false"
          role="presentation"
          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"
          />
          <path
            d="M0 0h24v24H0z"
            fill="none"
          />
        </svg>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
      >
        <div
          class="MuiCardContent-root-id TimelineNote-cardContent-id"
        >
          <div
            class="TimelineNote-title-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              admin@example.com
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              <time
                class=""
                datetime="1525712282000"
                title="May 7, 2018 12:58 PM"
              >
                3 months ago
              </time>
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <p
            class="MuiTypography-root-id MuiTypography-body2-id TimelineNote-content-id"
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
          </p>
        </div>
      </div>
    </div>
    <div
      class="TimelineNote-root-id"
    >
      <div
        class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineNote-avatar-id"
        style="background:#03a9f4"
      >
        <svg
          aria-hidden="true"
          class="MuiSvgIcon-root-id"
          focusable="false"
          role="presentation"
          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"
          />
          <path
            d="M0 0h24v24H0z"
            fill="none"
          />
        </svg>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id TimelineNote-card-id"
      >
        <div
          class="MuiCardContent-root-id TimelineNote-cardContent-id"
        >
          <div
            class="TimelineNote-title-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              ceo@example.com
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              <time
                class=""
                datetime="1525712282000"
                title="May 7, 2018 12:58 PM"
              >
                3 months ago
              </time>
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <p
            class="MuiTypography-root-id MuiTypography-body2-id TimelineNote-content-id"
          >
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
          </p>
        </div>
      </div>
    </div>
    <div
      class="Component-root-id"
    >
      <span
        class="Component-dot-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id MuiExpansionPanel-root-id MuiExpansionPanel-rounded-id Component-panel-id"
      >
        <div
          aria-expanded="false"
          class="MuiButtonBase-root-id MuiExpansionPanelSummary-root-id"
          role="button"
          tabindex="0"
        >
          <div
            class="MuiExpansionPanelSummary-content-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Expansion panel 3
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Component-dateExpander-id"
            >
              Expansion panel 3
            </p>
          </div>
          <div
            aria-hidden="true"
            class="MuiButtonBase-root-id MuiIconButton-root-id MuiExpansionPanelSummary-expandIcon-id"
            role="button"
            tabindex="-1"
          >
            <span
              class="MuiIconButton-label-id"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M16.59 8.59L12 13.17 7.41 8.59 6 10l6 6 6-6z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </div>
        </div>
        <div
          aria-hidden="true"
          class="MuiCollapse-container-id"
          style="min-height:0px"
        >
          <div
            class="MuiCollapse-wrapper-id"
          >
            <div
              class="MuiCollapse-wrapperInner-id"
            >
              <div
                class="MuiExpansionPanelDetails-root-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget.
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Generics / Weight default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    style="margin:auto;overflow:visible;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 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 / 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 / OrderCustomer default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
          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"
    >
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Anonymous user
      </p>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Contact information
        </p>
      </div>
      <a
        class="ExternalLink-link-id"
        href="mailto:melissa.simon@example.com"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
        >
          melissa.simon@example.com
        </p>
      </a>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Shipping Address
        </p>
      </div>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Melissa Simon
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        487 Roberto Shores
        <br />
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        66272 West Patriciastad
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Wyspy Salomona
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      />
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Billing Address
        </p>
      </div>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Same as shipping address
      </p>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderCustomer editable 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
          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"
    >
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Anonymous user
      </p>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Contact information
        </p>
      </div>
      <a
        class="ExternalLink-link-id"
        href="mailto:melissa.simon@example.com"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
        >
          melissa.simon@example.com
        </p>
      </a>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Shipping Address
        </p>
        <div
          class="OrderCustomer-sectionHeaderToolbar-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Edit
            </span>
          </button>
        </div>
      </div>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Melissa Simon
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        487 Roberto Shores
        <br />
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        66272 West Patriciastad
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Wyspy Salomona
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      />
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Billing Address
        </p>
        <div
          class="OrderCustomer-sectionHeaderToolbar-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Edit
            </span>
          </button>
        </div>
      </div>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Same as shipping address
      </p>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderCustomer loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
          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"
      >
        ‌
      </span>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Contact information
        </p>
      </div>
      <span
        class="Skeleton-skeleton-id"
      >
        ‌
      </span>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Shipping Address
        </p>
      </div>
      <span
        class="Skeleton-skeleton-id"
      >
        ‌
      </span>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Billing Address
        </p>
      </div>
      <span
        class="Skeleton-skeleton-id"
      >
        ‌
      </span>
    </div>
  </div>
</div>
`;

exports[`Storyshots Orders / OrderCustomer with different addresses 1`] = `
<div
  style="padding:24px"
>
  <div
    class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
  >
    <div
      class="CardTitle-root-id"
    >
      <span
        class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
      >
        Customer
      </span>
      <div
        class="CardTitle-toolbar-id"
      >
        <button
          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
          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"
    >
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Anonymous user
      </p>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Contact information
        </p>
      </div>
      <a
        class="ExternalLink-link-id"
        href="mailto:melissa.simon@example.com"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
        >
          melissa.simon@example.com
        </p>
      </a>
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Shipping Address
        </p>
      </div>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Melissa Simon
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        487 Roberto Shores
        <br />
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        66272 West Patriciastad
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Wyspy Salomona
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      />
    </div>
    <hr
      class="Hr-root-id"
    />
    <div
      class="MuiCardContent-root-id"
    >
      <div
        class="OrderCustomer-sectionHeader-id"
      >
        <p
          class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
        >
          Billing Address
        </p>
      </div>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Melissa Simon
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        487 Roberto Shores
        <br />
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        66272 West Patriciastad
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      >
        Wyspy Salomona
      </p>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id"
      />
    </div>
  </div>
</div>
`;

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

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

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

exports[`Storyshots Orders / OrderDraftFinalizeDialog with warnings 1`] = `
<div
  style="padding:24px"
/>
`;

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

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

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

exports[`Storyshots Orders / OrderHistory default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="OrderHistory-root-id"
  >
    <p
      class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
    >
      Order History
    </p>
    <hr
      class="Hr-root-id"
    />
    <div
      class="Timeline-root-id"
    >
      <form>
        <div
          class="TimelineAddNote-noteRoot-id"
        >
          <div
            class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
          >
            <div
              class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
              style="background:#673ab7"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </div>
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
            >
              <div
                class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
              >
                <div
                  class="MuiPrivateTextarea-root-id"
                >
                  <textarea
                    aria-hidden="true"
                    class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                    readonly=""
                    rows="1"
                    tabindex="-1"
                  />
                  <textarea
                    aria-hidden="true"
                    class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                    readonly=""
                    rows="1"
                    tabindex="-1"
                  />
                  <textarea
                    aria-invalid="false"
                    class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                    name="message"
                    placeholder="Leave your note here..."
                    rows="1"
                    style="height:19px"
                  />
                </div>
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Send
                  </span>
                </button>
              </div>
            </div>
          </div>
        </div>
      </form>
      <div
        class="Component-root-id"
      >
        <span
          class="Component-dot-id"
        />
        <div
          class="Component-noExpander-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Fulfilled 1 items
          </p>
          <p
            class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
          >
            <time
              class=""
              datetime="1537190544376"
              title="Sep 17, 2018 9:22 AM"
            >
              in a month
            </time>
          </p>
        </div>
      </div>
    </div>
  </div>
</div>
`;

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

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

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

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

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

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

exports[`Storyshots Product types / ProductTypeDeleteDialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Products / ProductVariantImageSelectDialog default 1`] = `null`;

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

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

exports[`Storyshots Shipping / Rate details form errors 1`] = `
<div
  style="padding:24px"
/>
`;

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

exports[`Storyshots Shipping / Rate details new 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Shipping / Rate details weight 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots SiteSettings / Add key dialog default 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots SiteSettings / Add key dialog form errors 1`] = `
<div
  style="padding:24px"
/>
`;

exports[`Storyshots Views / Attributes / Attribute details create 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create New Attribute
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder=""
                    type="text"
                    value=""
                  />
                </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="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    class="MuiSelect-root-id"
                  >
                    <div
                      aria-haspopup="true"
                      aria-pressed="false"
                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
                      id="select-inputType"
                      role="button"
                      tabindex="0"
                    >
                      Dropdown
                    </div>
                    <input
                      name="inputType"
                      type="hidden"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="valueRequired"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Value Required
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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 Hook-columnDrag-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnAdmin-id"
                    scope="col"
                  >
                    Admin
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnStore-id"
                    scope="col"
                  >
                    Default Store View
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    john-doe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    John Doe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    milionare-pirate
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    Milionare Pirate
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in faceted navigation
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Visible on Product Page in Storefront
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInDashboard"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in Filtering
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enabled, you’ll be able to use this attribute to filter products in product list.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="availableInGrid"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Add to Column Options
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enable this attribute can be used as a column in product table.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Author
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                </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="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-disabled-id MuiFilledInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    class="MuiSelect-root-id"
                  >
                    <div
                      aria-haspopup="true"
                      aria-pressed="false"
                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id MuiInputBase-disabled-id MuiFilledInput-disabled-id"
                      id="select-inputType"
                      role="button"
                    >
                      Dropdown
                    </div>
                    <input
                      name="inputType"
                      type="hidden"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="valueRequired"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Value Required
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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 Hook-columnDrag-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnAdmin-id"
                    scope="col"
                  >
                    Admin
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnStore-id"
                    scope="col"
                  >
                    Default Store View
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    john-doe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    John Doe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    milionare-pirate
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    Milionare Pirate
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in faceted navigation
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Visible on Product Page in Storefront
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInDashboard"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in Filtering
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enabled, you’ll be able to use this attribute to filter products in product list.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="availableInGrid"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Add to Column Options
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enable this attribute can be used as a column in product table.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Author
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-disabled-id MuiFilledInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    class="MuiSelect-root-id"
                  >
                    <div
                      aria-haspopup="true"
                      aria-pressed="false"
                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id MuiInputBase-disabled-id MuiFilledInput-disabled-id"
                      id="select-inputType"
                      role="button"
                    >
                      Dropdown
                    </div>
                    <input
                      name="inputType"
                      type="hidden"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="valueRequired"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Value Required
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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 Hook-columnDrag-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnAdmin-id"
                    scope="col"
                  >
                    Admin
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnStore-id"
                    scope="col"
                  >
                    Default Store View
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    john-doe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    John Doe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    milionare-pirate
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    Milionare Pirate
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in faceted navigation
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Visible on Product Page in Storefront
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInDashboard"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in Filtering
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enabled, you’ll be able to use this attribute to filter products in product list.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="availableInGrid"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Add to Column Options
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enable this attribute can be used as a column in product table.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="slug"
                    placeholder=""
                    type="text"
                    value=""
                  />
                </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="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-disabled-id MuiFilledInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    class="MuiSelect-root-id"
                  >
                    <div
                      aria-haspopup="true"
                      aria-pressed="false"
                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id MuiInputBase-disabled-id MuiFilledInput-disabled-id"
                      id="select-inputType"
                      role="button"
                    >
                      Dropdown
                    </div>
                    <input
                      name="inputType"
                      type="hidden"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="valueRequired"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Value Required
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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 Hook-columnDrag-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnAdmin-id"
                    scope="col"
                  >
                    Admin
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnStore-id"
                    scope="col"
                  >
                    Default Store View
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-iconCell-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        disabled=""
                        name="filterableInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in faceted navigation
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="storefrontSearchPosition"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        disabled=""
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Visible on Product Page in Storefront
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        disabled=""
                        name="filterableInDashboard"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in Filtering
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enabled, you’ll be able to use this attribute to filter products in product list.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        disabled=""
                        name="availableInGrid"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Add to Column Options
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enable this attribute can be used as a column in product table.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details multiple select input 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Author
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                </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="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-disabled-id MuiFilledInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    class="MuiSelect-root-id"
                  >
                    <div
                      aria-haspopup="true"
                      aria-pressed="false"
                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id MuiInputBase-disabled-id MuiFilledInput-disabled-id"
                      id="select-inputType"
                      role="button"
                    >
                      Multiple Select
                    </div>
                    <input
                      name="inputType"
                      type="hidden"
                      value="MULTISELECT"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="valueRequired"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Value Required
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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 Hook-columnDrag-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnAdmin-id"
                    scope="col"
                  >
                    Admin
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnStore-id"
                    scope="col"
                  >
                    Default Store View
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    john-doe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    John Doe
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    milionare-pirate
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    Milionare Pirate
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in faceted navigation
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Visible on Product Page in Storefront
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInDashboard"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in Filtering
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enabled, you’ll be able to use this attribute to filter products in product list.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="availableInGrid"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Add to Column Options
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enable this attribute can be used as a column in product table.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute details no values 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Author
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Default Label
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Author"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Attribute Code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="author"
                    type="text"
                    value="author"
                  />
                </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="MuiFormControl-root-id SingleSelectField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
                  data-shrink="true"
                >
                  Catalog Input type for Store Owner
                </label>
                <div
                  class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-disabled-id MuiFilledInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    class="MuiSelect-root-id"
                  >
                    <div
                      aria-haspopup="true"
                      aria-pressed="false"
                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id MuiInputBase-disabled-id MuiFilledInput-disabled-id"
                      id="select-inputType"
                      role="button"
                    >
                      Dropdown
                    </div>
                    <input
                      name="inputType"
                      type="hidden"
                      value="DROPDOWN"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="valueRequired"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Value Required
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attribute Values
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add value
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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 Hook-columnDrag-id"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnAdmin-id"
                    scope="col"
                  >
                    Admin
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id Hook-columnStore-id"
                    scope="col"
                  >
                    Default Store View
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id"
                    scope="col"
                  />
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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 Hook-columnAdmin-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnStore-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Properties
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Storefront Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in faceted navigation
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Position in faceted navigation
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="storefrontSearchPosition"
                    type="text"
                    value="2"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="visibleInStorefront"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Visible on Product Page in Storefront
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="CardSpacer-spacer-id"
              />
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id"
              >
                Dashboard Properties
              </h6>
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="filterableInDashboard"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use in Filtering
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enabled, you’ll be able to use this attribute to filter products in product list.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="availableInGrid"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Add to Column Options
                    </span>
                    <div>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        If enable this attribute can be used as a column in product table.
                      </span>
                    </div>
                  </div>
                </span>
              </label>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Attributes / Attribute list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Attributes
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add attribute
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colSlug-id"
              scope="col"
            >
              Attribute Code
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colName-id"
              scope="col"
            >
              Default Label
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colVisible-id"
              scope="col"
            >
              Visible
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colSearchable-id"
              scope="col"
            >
              Searchable
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colFaceted-id"
              scope="col"
            >
              Use in faceted search
            </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              author
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Author
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              No
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              box-size
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Box Size
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              No
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              No
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              brand
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Brand
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              No
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              No
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              Yes
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              candy-box-size
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Candy Box Size
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              No
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              Yes
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              coffee-genre
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Coffee Genre
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              Yes
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              collar
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Collar
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              No
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              Yes
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              color
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Color
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              No
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              No
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              cover
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Cover
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              No
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              No
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              flavor
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Flavor
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              Yes
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              language
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Language
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              No
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              Yes
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              publisher
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Publisher
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              Yes
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              size
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              Size
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              Yes
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              Yes
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Attributes
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add attribute
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colSlug-id"
              scope="col"
            >
              Attribute Code
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colName-id"
              scope="col"
            >
              Default Label
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colVisible-id"
              scope="col"
            >
              Visible
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colSearchable-id"
              scope="col"
            >
              Searchable
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colFaceted-id"
              scope="col"
            >
              Use in faceted search
            </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id Hook-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSlug-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colName-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colVisible-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colSearchable-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id Hook-colFaceted-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Attributes
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add attribute
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 Hook-colSlug-id"
              scope="col"
            >
              Attribute Code
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colName-id"
              scope="col"
            >
              Default Label
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colVisible-id"
              scope="col"
            >
              Visible
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colSearchable-id"
              scope="col"
            >
              Searchable
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id Hook-colFaceted-id"
              scope="col"
            >
              Use in faceted search
            </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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>
`;

exports[`Storyshots Views / Authentication / Log in default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="LoginCard-root-id"
    >
      <div
        class="LoginCard-sidebar-id"
      >
        <span
          class="isvg pending LoginCard-sidebarArt-id"
        />
      </div>
      <div
        class="LoginCard-mainPanel-id"
      >
        <div
          class="LoginCard-mainPanelContent-id"
        >
          <span
            class="isvg pending LoginCard-logo-id"
          />
          <div
            class="MuiFormControl-root-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                autocomplete="username"
                autofocus=""
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                data-tc="email"
                name="email"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-tc="password"
          >
            <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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                autocomplete="current-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                name="password"
                type="password"
                value=""
              />
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="LoginCard-buttonContainer-id"
          >
            <label
              class="MuiFormControlLabel-root-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  name="rememberMe"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
              >
                Remember me
              </span>
            </label>
            <div
              class="FormSpacer-spacer-id"
            />
            <button
              class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id LoginCard-loginButton-id"
              data-tc="submit"
              disabled=""
              tabindex="-1"
              type="submit"
            >
              <span
                class="MuiButton-label-id"
              >
                Login
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Authentication / Log in error 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="LoginCard-root-id"
    >
      <div
        class="LoginCard-sidebar-id"
      >
        <span
          class="isvg pending LoginCard-sidebarArt-id"
        />
      </div>
      <div
        class="LoginCard-mainPanel-id"
      >
        <div
          class="LoginCard-mainPanelContent-id"
        >
          <span
            class="isvg pending LoginCard-logo-id"
          />
          <div
            class="LoginCard-panel-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-caption-id"
            >
              Sorry, your username and/or password are incorrect. Please try again.
            </span>
          </div>
          <div
            class="MuiFormControl-root-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                autocomplete="username"
                autofocus=""
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                data-tc="email"
                name="email"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-tc="password"
          >
            <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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                autocomplete="current-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                name="password"
                type="password"
                value=""
              />
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="LoginCard-buttonContainer-id"
          >
            <label
              class="MuiFormControlLabel-root-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  name="rememberMe"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
              >
                Remember me
              </span>
            </label>
            <div
              class="FormSpacer-spacer-id"
            />
            <button
              class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id LoginCard-loginButton-id"
              data-tc="submit"
              disabled=""
              tabindex="-1"
              type="submit"
            >
              <span
                class="MuiButton-label-id"
              >
                Login
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Authentication / Log in loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="LoginCard-root-id"
    >
      <div
        class="LoginCard-sidebar-id"
      >
        <span
          class="isvg pending LoginCard-sidebarArt-id"
        />
      </div>
      <div
        class="LoginCard-mainPanel-id"
      >
        <div
          class="LoginCard-mainPanelContent-id"
        >
          <span
            class="isvg pending LoginCard-logo-id"
          />
          <div
            class="MuiFormControl-root-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                autocomplete="username"
                autofocus=""
                class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                data-tc="email"
                name="email"
                type="text"
                value=""
              />
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            data-tc="password"
          >
            <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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0.01px"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <input
                aria-invalid="false"
                autocomplete="current-password"
                class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                name="password"
                type="password"
                value=""
              />
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="LoginCard-buttonContainer-id"
          >
            <label
              class="MuiFormControlLabel-root-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  name="rememberMe"
                  type="checkbox"
                  value="false"
                />
              </button>
              <span
                class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
              >
                Remember me
              </span>
            </label>
            <div
              class="FormSpacer-spacer-id"
            />
            <button
              class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id LoginCard-loginButton-id"
              data-tc="submit"
              disabled=""
              tabindex="-1"
              type="submit"
            >
              <span
                class="MuiButton-label-id"
              >
                Login
              </span>
            </button>
          </div>
        </div>
      </div>
    </div>
  </form>
</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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Categories
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add category
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
              scope="col"
            >
              Category Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
              scope="col"
            >
              Subcategories
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
              scope="col"
            >
              No. of Products
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id CategoryList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
            >
              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 MuiTableRow-hover-id CategoryList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
            >
              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 MuiTableRow-hover-id CategoryList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
            >
              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 MuiTableRow-hover-id CategoryList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
            >
              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 MuiTableRow-hover-id CategoryList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
            >
              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 MuiTableRow-hover-id CategoryList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
            >
              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>
`;

exports[`Storyshots Views / Categories / Category list empty 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Categories
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add category
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 CategoryList-colName-id"
              scope="col"
            >
              Category Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
              scope="col"
            >
              Subcategories
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
              scope="col"
            >
              No. of Products
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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>
`;

exports[`Storyshots Views / Categories / Category list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Categories
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add category
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
              scope="col"
            >
              Category Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
              scope="col"
            >
              Subcategories
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
              scope="col"
            >
              No. of Products
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id CategoryList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create New Category
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              General Informations
            </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 CategoryDetailsForm-root-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="RichTextEditor-root-id RichTextEditor-scroll-id"
            >
              <div
                class="RichTextEditor-input-id"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                >
                  Category Description
                </span>
                <div
                  class="Draftail-Editor"
                >
                  <div
                    class="Draftail-Toolbar"
                    role="toolbar"
                  >
                    <div
                      class="Draftail-ToolbarGroup"
                    >
                      <button
                        aria-label="Bold
Ctrl + B"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="BOLD"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Italic
Ctrl + I"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="ITALIC"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Strikethrough
Ctrl + ⇧ + X"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="STRIKETHROUGH"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                          />
                        </svg>
                      </button>
                    </div>
                    <div
                      class="Draftail-ToolbarGroup"
                    >
                      <button
                        aria-label="Heading 1
#"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="header-one"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                          />
                          <path
                            d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Heading 2
##"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="header-two"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                          />
                          <path
                            d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Heading 3
###"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="header-three"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                          />
                          <path
                            d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Blockquote
>"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="blockquote"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Bulleted list
-"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="unordered-list-item"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Numbered list
1."
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="ordered-list-item"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                          />
                        </svg>
                      </button>
                    </div>
                    <div
                      class="Draftail-ToolbarGroup"
                    >
                      <button
                        aria-label="Line break
⇧ + ↵"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="BR"
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="Draftail-ToolbarButton__label"
                        >
                          ↵
                        </span>
                      </button>
                    </div>
                    <div
                      class="Draftail-ToolbarGroup"
                    >
                      <button
                        aria-label="Link
Ctrl + K"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="LINK"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                  <div
                    class="DraftEditor-root"
                  >
                    <div
                      class="DraftEditor-editorContainer"
                    >
                      <div
                        aria-describedby="placeholder-testKey"
                        class="notranslate public-DraftEditor-content"
                        contenteditable="true"
                        role="textbox"
                        spellcheck="false"
                        style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                      >
                        <div
                          data-contents="true"
                        >
                          <div
                            class="Draftail-block--unstyled "
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="testKey-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="testKey-0-0"
                            >
                              <span
                                data-offset-key="testKey-0-0"
                              >
                                <br
                                  data-text="true"
                                />
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Search Engine Preview
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                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"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Add search engine title and description to make this category easier to find
            </p>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create New Category
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              General Informations
            </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 CategoryDetailsForm-root-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-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="RichTextEditor-root-id RichTextEditor-scroll-id"
            >
              <div
                class="RichTextEditor-input-id"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                >
                  Category Description
                </span>
                <div
                  class="Draftail-Editor"
                >
                  <div
                    class="Draftail-Toolbar"
                    role="toolbar"
                  >
                    <div
                      class="Draftail-ToolbarGroup"
                    >
                      <button
                        aria-label="Bold
Ctrl + B"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="BOLD"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Italic
Ctrl + I"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="ITALIC"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Strikethrough
Ctrl + ⇧ + X"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="STRIKETHROUGH"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                          />
                        </svg>
                      </button>
                    </div>
                    <div
                      class="Draftail-ToolbarGroup"
                    >
                      <button
                        aria-label="Heading 1
#"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="header-one"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                          />
                          <path
                            d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Heading 2
##"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="header-two"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                          />
                          <path
                            d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Heading 3
###"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="header-three"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                          />
                          <path
                            d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Blockquote
>"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="blockquote"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Bulleted list
-"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="unordered-list-item"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                          />
                        </svg>
                      </button>
                      <button
                        aria-label="Numbered list
1."
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="ordered-list-item"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                          />
                        </svg>
                      </button>
                    </div>
                    <div
                      class="Draftail-ToolbarGroup"
                    >
                      <button
                        aria-label="Line break
⇧ + ↵"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="BR"
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="Draftail-ToolbarButton__label"
                        >
                          ↵
                        </span>
                      </button>
                    </div>
                    <div
                      class="Draftail-ToolbarGroup"
                    >
                      <button
                        aria-label="Link
Ctrl + K"
                        class="Draftail-ToolbarButton"
                        data-draftail-balloon="true"
                        name="LINK"
                        tabindex="-1"
                        type="button"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                          />
                        </svg>
                      </button>
                    </div>
                  </div>
                  <div
                    class="DraftEditor-root"
                  >
                    <div
                      class="DraftEditor-editorContainer"
                    >
                      <div
                        aria-describedby="placeholder-testKey"
                        class="notranslate public-DraftEditor-content"
                        contenteditable="true"
                        role="textbox"
                        spellcheck="false"
                        style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                      >
                        <div
                          data-contents="true"
                        >
                          <div
                            class="Draftail-block--unstyled "
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="testKey-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="testKey-0-0"
                            >
                              <span
                                data-offset-key="testKey-0-0"
                              >
                                <br
                                  data-text="true"
                                />
                              </span>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Search Engine Preview
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                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"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Add search engine title and description to make this category easier to find
            </p>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Coffees
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            General Informations
          </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 CategoryDetailsForm-root-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
              >
                Category Description
              </span>
              <div
                class="Draftail-Editor Draftail-Editor--hide-placeholder"
              >
                <div
                  class="Draftail-Toolbar"
                  role="toolbar"
                >
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Bold
Ctrl + B"
                      class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                      data-draftail-balloon="true"
                      name="BOLD"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italic
Ctrl + I"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ITALIC"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough
Ctrl + ⇧ + X"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="STRIKETHROUGH"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Heading 1
#"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-one"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                        />
                        <path
                          d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 2
##"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-two"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                        />
                        <path
                          d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 3
###"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-three"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                        />
                        <path
                          d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Blockquote
>"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="blockquote"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Bulleted list
-"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="unordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Numbered list
1."
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Line break
⇧ + ↵"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="BR"
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="Draftail-ToolbarButton__label"
                      >
                        ↵
                      </span>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Link
Ctrl + K"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="LINK"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="DraftEditor-root"
                >
                  <div
                    class="DraftEditor-editorContainer"
                  >
                    <div
                      aria-describedby="placeholder-testKey"
                      class="notranslate public-DraftEditor-content"
                      contenteditable="true"
                      role="textbox"
                      spellcheck="false"
                      style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                    >
                      <div
                        data-contents="true"
                      >
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="rosn-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="rosn-0-0"
                          >
                            <span
                              data-offset-key="rosn-0-0"
                              style="font-weight:bold"
                            >
                              <span
                                data-text="true"
                              >
                                bold
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="6tbch-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="6tbch-0-0"
                          >
                            <span
                              data-offset-key="6tbch-0-0"
                              style="font-style:italic"
                            >
                              <span
                                data-text="true"
                              >
                                italic
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="1p044-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="1p044-0-0"
                          >
                            <span
                              data-offset-key="1p044-0-0"
                              style="text-decoration:line-through"
                            >
                              <span
                                data-text="true"
                              >
                                strikethrough
                              </span>
                            </span>
                          </div>
                        </div>
                        <h1
                          class="Draftail-block--header-one "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="aven6-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="aven6-0-0"
                          >
                            <span
                              data-offset-key="aven6-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h1
                              </span>
                            </span>
                          </div>
                        </h1>
                        <h2
                          class="Draftail-block--header-two "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="9rabl-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="9rabl-0-0"
                          >
                            <span
                              data-offset-key="9rabl-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h2
                              </span>
                            </span>
                          </div>
                        </h2>
                        <h3
                          class="Draftail-block--header-three "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="bv0ac-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="bv0ac-0-0"
                          >
                            <span
                              data-offset-key="bv0ac-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h3
                              </span>
                            </span>
                          </div>
                        </h3>
                        <blockquote
                          class="Draftail-block--blockquote "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="2ip7q-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="2ip7q-0-0"
                          >
                            <span
                              data-offset-key="2ip7q-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                blockquote
                              </span>
                            </span>
                          </div>
                        </blockquote>
                        <ul
                          class="public-DraftStyleDefault-ul"
                          data-offset-key="8r8ss-0-0"
                        >
                          <li
                            class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="8r8ss-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="8r8ss-0-0"
                            >
                              <span
                                data-offset-key="8r8ss-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ul
                                </span>
                              </span>
                            </div>
                          </li>
                        </ul>
                        <ol
                          class="public-DraftStyleDefault-ol"
                          data-offset-key="911hc-0-0"
                        >
                          <li
                            class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="911hc-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="911hc-0-0"
                            >
                              <span
                                data-offset-key="911hc-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ol
                                </span>
                              </span>
                            </div>
                          </li>
                        </ol>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="5aejo-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="5aejo-0-0"
                          >
                            <span
                              data-offset-key="5aejo-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                link
                              </span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Background image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              class="Hook-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="ImageTile-imageContainer-id"
            data-tc="product-image"
          >
            <div
              class="ImageTile-imageOverlay-id"
            >
              <div
                class="ImageTile-imageOverlayToolbar-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"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="ImageTile-image-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <div
                class="MuiPrivateTextarea-root-id"
              >
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                />
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                >
                  Alt text
                </textarea>
                <textarea
                  aria-invalid="false"
                  class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="backgroundImageAlt"
                  rows="1"
                  style="height:19px"
                >
                  Alt text
                </textarea>
              </div>
            </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              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"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Add search engine title and description to make this category easier to find
          </p>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-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 CategoryList-colName-id"
                scope="col"
              >
                Category Name
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
                scope="col"
              >
                Subcategories
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
                scope="col"
              >
                No. of Products
              </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-tc="button-pagination-back"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                          <path
                            d="M24 0v24H0V0h24z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-tc="button-pagination-next"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                          <path
                            d="M0 24V0h24v24H0z"
                            fill="none"
                          />
                        </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>
  </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            General Informations
          </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 CategoryDetailsForm-root-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="name"
                  type="text"
                  value=""
                />
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
              >
                Category Description
              </span>
              <div
                class="Draftail-Editor"
              >
                <div
                  class="Draftail-Toolbar"
                  role="toolbar"
                >
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Bold
Ctrl + B"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="BOLD"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italic
Ctrl + I"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ITALIC"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough
Ctrl + ⇧ + X"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="STRIKETHROUGH"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Heading 1
#"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-one"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                        />
                        <path
                          d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 2
##"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-two"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                        />
                        <path
                          d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 3
###"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-three"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                        />
                        <path
                          d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Blockquote
>"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="blockquote"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Bulleted list
-"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="unordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Numbered list
1."
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Line break
⇧ + ↵"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="BR"
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="Draftail-ToolbarButton__label"
                      >
                        ↵
                      </span>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Link
Ctrl + K"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="LINK"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="DraftEditor-root"
                >
                  <div
                    class="DraftEditor-editorContainer"
                  >
                    <div
                      aria-describedby="placeholder-testKey"
                      class="notranslate public-DraftEditor-content"
                      contenteditable="true"
                      role="textbox"
                      spellcheck="false"
                      style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                    >
                      <div
                        data-contents="true"
                      >
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="testKey-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="testKey-0-0"
                          >
                            <span
                              data-offset-key="testKey-0-0"
                            >
                              <br
                                data-text="true"
                              />
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Background image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              class="Hook-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="Hook-imageContainer-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              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"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Add search engine title and description to make this category easier to find
          </p>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-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"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    type="checkbox"
                    value="false"
                  />
                </button>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colName-id"
                scope="col"
              >
                Category Name
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
                scope="col"
              >
                Subcategories
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
                scope="col"
              >
                No. of Products
              </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                      data-tc="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                          <path
                            d="M24 0v24H0V0h24z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                      data-tc="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                          <path
                            d="M0 24V0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id CategoryList-tableRow-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colName-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colSubcategories-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id CategoryList-colProducts-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Coffees
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            General Informations
          </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 CategoryDetailsForm-root-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
              >
                Category Description
              </span>
              <div
                class="Draftail-Editor Draftail-Editor--hide-placeholder"
              >
                <div
                  class="Draftail-Toolbar"
                  role="toolbar"
                >
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Bold
Ctrl + B"
                      class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                      data-draftail-balloon="true"
                      name="BOLD"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italic
Ctrl + I"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ITALIC"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough
Ctrl + ⇧ + X"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="STRIKETHROUGH"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Heading 1
#"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-one"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                        />
                        <path
                          d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 2
##"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-two"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                        />
                        <path
                          d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 3
###"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-three"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                        />
                        <path
                          d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Blockquote
>"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="blockquote"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Bulleted list
-"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="unordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Numbered list
1."
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Line break
⇧ + ↵"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="BR"
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="Draftail-ToolbarButton__label"
                      >
                        ↵
                      </span>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Link
Ctrl + K"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="LINK"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="DraftEditor-root"
                >
                  <div
                    class="DraftEditor-editorContainer"
                  >
                    <div
                      aria-describedby="placeholder-testKey"
                      class="notranslate public-DraftEditor-content"
                      contenteditable="true"
                      role="textbox"
                      spellcheck="false"
                      style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                    >
                      <div
                        data-contents="true"
                      >
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="rosn-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="rosn-0-0"
                          >
                            <span
                              data-offset-key="rosn-0-0"
                              style="font-weight:bold"
                            >
                              <span
                                data-text="true"
                              >
                                bold
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="6tbch-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="6tbch-0-0"
                          >
                            <span
                              data-offset-key="6tbch-0-0"
                              style="font-style:italic"
                            >
                              <span
                                data-text="true"
                              >
                                italic
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="1p044-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="1p044-0-0"
                          >
                            <span
                              data-offset-key="1p044-0-0"
                              style="text-decoration:line-through"
                            >
                              <span
                                data-text="true"
                              >
                                strikethrough
                              </span>
                            </span>
                          </div>
                        </div>
                        <h1
                          class="Draftail-block--header-one "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="aven6-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="aven6-0-0"
                          >
                            <span
                              data-offset-key="aven6-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h1
                              </span>
                            </span>
                          </div>
                        </h1>
                        <h2
                          class="Draftail-block--header-two "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="9rabl-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="9rabl-0-0"
                          >
                            <span
                              data-offset-key="9rabl-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h2
                              </span>
                            </span>
                          </div>
                        </h2>
                        <h3
                          class="Draftail-block--header-three "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="bv0ac-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="bv0ac-0-0"
                          >
                            <span
                              data-offset-key="bv0ac-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h3
                              </span>
                            </span>
                          </div>
                        </h3>
                        <blockquote
                          class="Draftail-block--blockquote "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="2ip7q-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="2ip7q-0-0"
                          >
                            <span
                              data-offset-key="2ip7q-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                blockquote
                              </span>
                            </span>
                          </div>
                        </blockquote>
                        <ul
                          class="public-DraftStyleDefault-ul"
                          data-offset-key="8r8ss-0-0"
                        >
                          <li
                            class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="8r8ss-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="8r8ss-0-0"
                            >
                              <span
                                data-offset-key="8r8ss-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ul
                                </span>
                              </span>
                            </div>
                          </li>
                        </ul>
                        <ol
                          class="public-DraftStyleDefault-ol"
                          data-offset-key="911hc-0-0"
                        >
                          <li
                            class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="911hc-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="911hc-0-0"
                            >
                              <span
                                data-offset-key="911hc-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ol
                                </span>
                              </span>
                            </div>
                          </li>
                        </ol>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="5aejo-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="5aejo-0-0"
                          >
                            <span
                              data-offset-key="5aejo-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                link
                              </span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Background image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              class="Hook-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="ImageTile-imageContainer-id"
            data-tc="product-image"
          >
            <div
              class="ImageTile-imageOverlay-id"
            >
              <div
                class="ImageTile-imageOverlayToolbar-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"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="ImageTile-image-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <div
                class="MuiPrivateTextarea-root-id"
              >
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                />
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                >
                  Alt text
                </textarea>
                <textarea
                  aria-invalid="false"
                  class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="backgroundImageAlt"
                  rows="1"
                  style="height:19px"
                >
                  Alt text
                </textarea>
              </div>
            </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              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"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Add search engine title and description to make this category easier to find
          </p>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-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 CategoryList-colName-id"
                scope="col"
              >
                Category Name
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
                scope="col"
              >
                Subcategories
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
                scope="col"
              >
                No. of Products
              </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-tc="button-pagination-back"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                          <path
                            d="M24 0v24H0V0h24z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-tc="button-pagination-next"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                          <path
                            d="M0 24V0h24v24H0z"
                            fill="none"
                          />
                        </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>
  </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Coffees
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            General Informations
          </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 CategoryDetailsForm-root-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
              >
                Category Description
              </span>
              <div
                class="Draftail-Editor Draftail-Editor--hide-placeholder"
              >
                <div
                  class="Draftail-Toolbar"
                  role="toolbar"
                >
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Bold
Ctrl + B"
                      class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                      data-draftail-balloon="true"
                      name="BOLD"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italic
Ctrl + I"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ITALIC"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough
Ctrl + ⇧ + X"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="STRIKETHROUGH"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Heading 1
#"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-one"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                        />
                        <path
                          d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 2
##"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-two"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                        />
                        <path
                          d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 3
###"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-three"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                        />
                        <path
                          d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Blockquote
>"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="blockquote"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Bulleted list
-"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="unordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Numbered list
1."
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Line break
⇧ + ↵"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="BR"
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="Draftail-ToolbarButton__label"
                      >
                        ↵
                      </span>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Link
Ctrl + K"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="LINK"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="DraftEditor-root"
                >
                  <div
                    class="DraftEditor-editorContainer"
                  >
                    <div
                      aria-describedby="placeholder-testKey"
                      class="notranslate public-DraftEditor-content"
                      contenteditable="true"
                      role="textbox"
                      spellcheck="false"
                      style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                    >
                      <div
                        data-contents="true"
                      >
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="rosn-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="rosn-0-0"
                          >
                            <span
                              data-offset-key="rosn-0-0"
                              style="font-weight:bold"
                            >
                              <span
                                data-text="true"
                              >
                                bold
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="6tbch-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="6tbch-0-0"
                          >
                            <span
                              data-offset-key="6tbch-0-0"
                              style="font-style:italic"
                            >
                              <span
                                data-text="true"
                              >
                                italic
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="1p044-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="1p044-0-0"
                          >
                            <span
                              data-offset-key="1p044-0-0"
                              style="text-decoration:line-through"
                            >
                              <span
                                data-text="true"
                              >
                                strikethrough
                              </span>
                            </span>
                          </div>
                        </div>
                        <h1
                          class="Draftail-block--header-one "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="aven6-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="aven6-0-0"
                          >
                            <span
                              data-offset-key="aven6-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h1
                              </span>
                            </span>
                          </div>
                        </h1>
                        <h2
                          class="Draftail-block--header-two "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="9rabl-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="9rabl-0-0"
                          >
                            <span
                              data-offset-key="9rabl-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h2
                              </span>
                            </span>
                          </div>
                        </h2>
                        <h3
                          class="Draftail-block--header-three "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="bv0ac-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="bv0ac-0-0"
                          >
                            <span
                              data-offset-key="bv0ac-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h3
                              </span>
                            </span>
                          </div>
                        </h3>
                        <blockquote
                          class="Draftail-block--blockquote "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="2ip7q-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="2ip7q-0-0"
                          >
                            <span
                              data-offset-key="2ip7q-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                blockquote
                              </span>
                            </span>
                          </div>
                        </blockquote>
                        <ul
                          class="public-DraftStyleDefault-ul"
                          data-offset-key="8r8ss-0-0"
                        >
                          <li
                            class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="8r8ss-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="8r8ss-0-0"
                            >
                              <span
                                data-offset-key="8r8ss-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ul
                                </span>
                              </span>
                            </div>
                          </li>
                        </ul>
                        <ol
                          class="public-DraftStyleDefault-ol"
                          data-offset-key="911hc-0-0"
                        >
                          <li
                            class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="911hc-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="911hc-0-0"
                            >
                              <span
                                data-offset-key="911hc-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ol
                                </span>
                              </span>
                            </div>
                          </li>
                        </ol>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="5aejo-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="5aejo-0-0"
                          >
                            <span
                              data-offset-key="5aejo-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                link
                              </span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Background image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              class="Hook-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="ImageTile-imageContainer-id"
            data-tc="product-image"
          >
            <div
              class="ImageTile-imageOverlay-id"
            >
              <div
                class="ImageTile-imageOverlayToolbar-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"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="ImageTile-image-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <div
                class="MuiPrivateTextarea-root-id"
              >
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                />
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                >
                  Alt text
                </textarea>
                <textarea
                  aria-invalid="false"
                  class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="backgroundImageAlt"
                  rows="1"
                  style="height:19px"
                >
                  Alt text
                </textarea>
              </div>
            </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              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"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Add search engine title and description to make this category easier to find
          </p>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Products in Coffees
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add product
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="CategoryProductList-tableContainer-id"
        >
          <table
            class="MuiTable-root-id CategoryProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="CategoryProductList-colName-id"
              />
              <col
                class="CategoryProductList-colType-id"
              />
              <col
                class="CategoryProductList-colPublished-id"
              />
              <col
                class="CategoryProductList-colPrice-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>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colType-id"
                  scope="col"
                >
                  Type
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPublished-id"
                  scope="col"
                >
                  Published
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPrice-id"
                  scope="col"
                >
                  Price
                </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-tc="button-pagination-back"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                            <path
                              d="M24 0v24H0V0h24z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-tc="button-pagination-next"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 17l5-5-5-5v10z"
                            />
                            <path
                              d="M0 24V0h24v24H0z"
                              fill="none"
                            />
                          </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>
  </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Coffees
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            General Informations
          </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 CategoryDetailsForm-root-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
              >
                Category Description
              </span>
              <div
                class="Draftail-Editor Draftail-Editor--hide-placeholder"
              >
                <div
                  class="Draftail-Toolbar"
                  role="toolbar"
                >
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Bold
Ctrl + B"
                      class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                      data-draftail-balloon="true"
                      name="BOLD"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italic
Ctrl + I"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ITALIC"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough
Ctrl + ⇧ + X"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="STRIKETHROUGH"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Heading 1
#"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-one"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                        />
                        <path
                          d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 2
##"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-two"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                        />
                        <path
                          d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 3
###"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-three"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                        />
                        <path
                          d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Blockquote
>"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="blockquote"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Bulleted list
-"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="unordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Numbered list
1."
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Line break
⇧ + ↵"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="BR"
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="Draftail-ToolbarButton__label"
                      >
                        ↵
                      </span>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Link
Ctrl + K"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="LINK"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="DraftEditor-root"
                >
                  <div
                    class="DraftEditor-editorContainer"
                  >
                    <div
                      aria-describedby="placeholder-testKey"
                      class="notranslate public-DraftEditor-content"
                      contenteditable="true"
                      role="textbox"
                      spellcheck="false"
                      style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                    >
                      <div
                        data-contents="true"
                      >
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="rosn-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="rosn-0-0"
                          >
                            <span
                              data-offset-key="rosn-0-0"
                              style="font-weight:bold"
                            >
                              <span
                                data-text="true"
                              >
                                bold
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="6tbch-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="6tbch-0-0"
                          >
                            <span
                              data-offset-key="6tbch-0-0"
                              style="font-style:italic"
                            >
                              <span
                                data-text="true"
                              >
                                italic
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="1p044-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="1p044-0-0"
                          >
                            <span
                              data-offset-key="1p044-0-0"
                              style="text-decoration:line-through"
                            >
                              <span
                                data-text="true"
                              >
                                strikethrough
                              </span>
                            </span>
                          </div>
                        </div>
                        <h1
                          class="Draftail-block--header-one "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="aven6-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="aven6-0-0"
                          >
                            <span
                              data-offset-key="aven6-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h1
                              </span>
                            </span>
                          </div>
                        </h1>
                        <h2
                          class="Draftail-block--header-two "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="9rabl-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="9rabl-0-0"
                          >
                            <span
                              data-offset-key="9rabl-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h2
                              </span>
                            </span>
                          </div>
                        </h2>
                        <h3
                          class="Draftail-block--header-three "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="bv0ac-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="bv0ac-0-0"
                          >
                            <span
                              data-offset-key="bv0ac-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h3
                              </span>
                            </span>
                          </div>
                        </h3>
                        <blockquote
                          class="Draftail-block--blockquote "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="2ip7q-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="2ip7q-0-0"
                          >
                            <span
                              data-offset-key="2ip7q-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                blockquote
                              </span>
                            </span>
                          </div>
                        </blockquote>
                        <ul
                          class="public-DraftStyleDefault-ul"
                          data-offset-key="8r8ss-0-0"
                        >
                          <li
                            class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="8r8ss-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="8r8ss-0-0"
                            >
                              <span
                                data-offset-key="8r8ss-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ul
                                </span>
                              </span>
                            </div>
                          </li>
                        </ul>
                        <ol
                          class="public-DraftStyleDefault-ol"
                          data-offset-key="911hc-0-0"
                        >
                          <li
                            class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="911hc-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="911hc-0-0"
                            >
                              <span
                                data-offset-key="911hc-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ol
                                </span>
                              </span>
                            </div>
                          </li>
                        </ol>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="5aejo-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="5aejo-0-0"
                          >
                            <span
                              data-offset-key="5aejo-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                link
                              </span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Background image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              class="Hook-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="ImageTile-imageContainer-id"
            data-tc="product-image"
          >
            <div
              class="ImageTile-imageOverlay-id"
            >
              <div
                class="ImageTile-imageOverlayToolbar-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"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="ImageTile-image-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <div
                class="MuiPrivateTextarea-root-id"
              >
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                />
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                >
                  Alt text
                </textarea>
                <textarea
                  aria-invalid="false"
                  class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="backgroundImageAlt"
                  rows="1"
                  style="height:19px"
                >
                  Alt text
                </textarea>
              </div>
            </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              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"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Add search engine title and description to make this category easier to find
          </p>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            All Subcategories
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add subcategory
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-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 CategoryList-colName-id"
                scope="col"
              >
                Category Name
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colSubcategories-id"
                scope="col"
              >
                Subcategories
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id CategoryList-colProducts-id"
                scope="col"
              >
                No. of Products
              </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                >
                  <div
                    class="TablePagination-spacer-id"
                  />
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-tc="button-pagination-back"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                          <path
                            d="M24 0v24H0V0h24z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-tc="button-pagination-next"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                          <path
                            d="M0 24V0h24v24H0z"
                            fill="none"
                          />
                        </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>
  </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Coffees
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            General Informations
          </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 CategoryDetailsForm-root-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Category Name
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Coffees"
                />
              </div>
            </div>
          </div>
          <div
            class="FormSpacer-spacer-id"
          />
          <div
            class="RichTextEditor-root-id RichTextEditor-scroll-id"
          >
            <div
              class="RichTextEditor-input-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
              >
                Category Description
              </span>
              <div
                class="Draftail-Editor Draftail-Editor--hide-placeholder"
              >
                <div
                  class="Draftail-Toolbar"
                  role="toolbar"
                >
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Bold
Ctrl + B"
                      class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                      data-draftail-balloon="true"
                      name="BOLD"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Italic
Ctrl + I"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ITALIC"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Strikethrough
Ctrl + ⇧ + X"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="STRIKETHROUGH"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Heading 1
#"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-one"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                        />
                        <path
                          d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 2
##"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-two"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                        />
                        <path
                          d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Heading 3
###"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="header-three"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                        />
                        <path
                          d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Blockquote
>"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="blockquote"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Bulleted list
-"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="unordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                        />
                      </svg>
                    </button>
                    <button
                      aria-label="Numbered list
1."
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="ordered-list-item"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                        />
                      </svg>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Line break
⇧ + ↵"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="BR"
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="Draftail-ToolbarButton__label"
                      >
                        ↵
                      </span>
                    </button>
                  </div>
                  <div
                    class="Draftail-ToolbarGroup"
                  >
                    <button
                      aria-label="Link
Ctrl + K"
                      class="Draftail-ToolbarButton"
                      data-draftail-balloon="true"
                      name="LINK"
                      tabindex="-1"
                      type="button"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                        />
                      </svg>
                    </button>
                  </div>
                </div>
                <div
                  class="DraftEditor-root"
                >
                  <div
                    class="DraftEditor-editorContainer"
                  >
                    <div
                      aria-describedby="placeholder-testKey"
                      class="notranslate public-DraftEditor-content"
                      contenteditable="true"
                      role="textbox"
                      spellcheck="false"
                      style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                    >
                      <div
                        data-contents="true"
                      >
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="rosn-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="rosn-0-0"
                          >
                            <span
                              data-offset-key="rosn-0-0"
                              style="font-weight:bold"
                            >
                              <span
                                data-text="true"
                              >
                                bold
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="6tbch-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="6tbch-0-0"
                          >
                            <span
                              data-offset-key="6tbch-0-0"
                              style="font-style:italic"
                            >
                              <span
                                data-text="true"
                              >
                                italic
                              </span>
                            </span>
                          </div>
                        </div>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="1p044-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="1p044-0-0"
                          >
                            <span
                              data-offset-key="1p044-0-0"
                              style="text-decoration:line-through"
                            >
                              <span
                                data-text="true"
                              >
                                strikethrough
                              </span>
                            </span>
                          </div>
                        </div>
                        <h1
                          class="Draftail-block--header-one "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="aven6-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="aven6-0-0"
                          >
                            <span
                              data-offset-key="aven6-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h1
                              </span>
                            </span>
                          </div>
                        </h1>
                        <h2
                          class="Draftail-block--header-two "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="9rabl-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="9rabl-0-0"
                          >
                            <span
                              data-offset-key="9rabl-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h2
                              </span>
                            </span>
                          </div>
                        </h2>
                        <h3
                          class="Draftail-block--header-three "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="bv0ac-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="bv0ac-0-0"
                          >
                            <span
                              data-offset-key="bv0ac-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                h3
                              </span>
                            </span>
                          </div>
                        </h3>
                        <blockquote
                          class="Draftail-block--blockquote "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="2ip7q-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="2ip7q-0-0"
                          >
                            <span
                              data-offset-key="2ip7q-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                blockquote
                              </span>
                            </span>
                          </div>
                        </blockquote>
                        <ul
                          class="public-DraftStyleDefault-ul"
                          data-offset-key="8r8ss-0-0"
                        >
                          <li
                            class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="8r8ss-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="8r8ss-0-0"
                            >
                              <span
                                data-offset-key="8r8ss-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ul
                                </span>
                              </span>
                            </div>
                          </li>
                        </ul>
                        <ol
                          class="public-DraftStyleDefault-ol"
                          data-offset-key="911hc-0-0"
                        >
                          <li
                            class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                            data-block="true"
                            data-editor="testKey"
                            data-offset-key="911hc-0-0"
                          >
                            <div
                              class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                              data-offset-key="911hc-0-0"
                            >
                              <span
                                data-offset-key="911hc-0-0"
                              >
                                <span
                                  data-text="true"
                                >
                                  ol
                                </span>
                              </span>
                            </div>
                          </li>
                        </ol>
                        <div
                          class="Draftail-block--unstyled "
                          data-block="true"
                          data-editor="testKey"
                          data-offset-key="5aejo-0-0"
                        >
                          <div
                            class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                            data-offset-key="5aejo-0-0"
                          >
                            <span
                              data-offset-key="5aejo-0-0"
                            >
                              <span
                                data-text="true"
                              >
                                link
                              </span>
                            </span>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Background image (optional)
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Upload image
              </span>
            </button>
            <input
              class="Hook-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="ImageTile-imageContainer-id"
            data-tc="product-image"
          >
            <div
              class="ImageTile-imageOverlay-id"
            >
              <div
                class="ImageTile-imageOverlayToolbar-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"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
            <img
              alt="Alt text"
              class="ImageTile-image-id"
              src="placeholder255x255.png"
            />
          </div>
        </div>
        <hr
          class="Hr-root-id"
        />
        <div
          class="MuiCardContent-root-id"
        >
          <div
            class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
          >
            <label
              class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
            >
              <fieldset
                aria-hidden="true"
                class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                style="padding-left:8px"
              >
                <legend
                  class="MuiPrivateNotchedOutline-legend-id"
                  style="width:0"
                >
                  <span>
                    ​
                  </span>
                </legend>
              </fieldset>
              <div
                class="MuiPrivateTextarea-root-id"
              >
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                />
                <textarea
                  aria-hidden="true"
                  class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                  readonly=""
                  rows="1"
                  tabindex="-1"
                >
                  Alt text
                </textarea>
                <textarea
                  aria-invalid="false"
                  class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                  name="backgroundImageAlt"
                  rows="1"
                  style="height:19px"
                >
                  Alt text
                </textarea>
              </div>
            </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Search Engine Preview
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              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"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Add search engine title and description to make this category easier to find
          </p>
        </div>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="TabContainer-root-id"
      >
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
        >
          Subcategories
        </span>
        <span
          class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
        >
          Products
        </span>
      </div>
      <div
        class="CardSpacer-spacer-id"
      />
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
      >
        <div
          class="CardTitle-root-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Products in Coffees
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Add product
              </span>
            </button>
          </div>
        </div>
        <div
          class="CardTitle-children-id"
        />
        <hr
          class="CardTitle-hr-id"
        />
        <div
          class="CategoryProductList-tableContainer-id"
        >
          <table
            class="MuiTable-root-id CategoryProductList-table-id"
          >
            <colgroup>
              <col />
              <col
                class="CategoryProductList-colName-id"
              />
              <col
                class="CategoryProductList-colType-id"
              />
              <col
                class="CategoryProductList-colPublished-id"
              />
              <col
                class="CategoryProductList-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"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colName-id"
                  scope="col"
                >
                  <span
                    class="CategoryProductList-colNameHeader-id"
                  >
                    Name
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colType-id"
                  scope="col"
                >
                  Type
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPublished-id"
                  scope="col"
                >
                  Published
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id CategoryProductList-colPrice-id"
                  scope="col"
                >
                  Price
                </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                  >
                    <div
                      class="TablePagination-spacer-id"
                    />
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-tc="button-pagination-back"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                            <path
                              d="M24 0v24H0V0h24z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-tc="button-pagination-next"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 17l5-5-5-5v10z"
                            />
                            <path
                              d="M0 24V0h24v24H0z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Gardner-Schultz
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $83.30
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      James, Martinez and Murray
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $68.27
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Curtis, Joyce and Turner
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $21.43
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Davis, Brown and Ray
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $62.76
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Gallegos Ltd
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $7.13
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Franklin Inc
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $48.82
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams-Taylor
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $27.34
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Riddle, Evans and Hicks
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $75.42
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Hebert-Sherman
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $86.62
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id CategoryProductList-link-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CategoryProductList-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder255x255.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Carter and Sons
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colType-id"
                >
                  Coffee
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPublished-id"
                >
                  <div
                    class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                  >
                    Published
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id CategoryProductList-colPrice-id"
                >
                  $48.66
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Collection details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Summer collection
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 CollectionDetails-name-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Summer collection"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor Draftail-Editor--hide-placeholder"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="rosn-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="rosn-0-0"
                              >
                                <span
                                  data-offset-key="rosn-0-0"
                                  style="font-weight:bold"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    bold
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="6tbch-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="6tbch-0-0"
                              >
                                <span
                                  data-offset-key="6tbch-0-0"
                                  style="font-style:italic"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    italic
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="1p044-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="1p044-0-0"
                              >
                                <span
                                  data-offset-key="1p044-0-0"
                                  style="text-decoration:line-through"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    strikethrough
                                  </span>
                                </span>
                              </div>
                            </div>
                            <h1
                              class="Draftail-block--header-one "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="aven6-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="aven6-0-0"
                              >
                                <span
                                  data-offset-key="aven6-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h1
                                  </span>
                                </span>
                              </div>
                            </h1>
                            <h2
                              class="Draftail-block--header-two "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="9rabl-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="9rabl-0-0"
                              >
                                <span
                                  data-offset-key="9rabl-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h2
                                  </span>
                                </span>
                              </div>
                            </h2>
                            <h3
                              class="Draftail-block--header-three "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="bv0ac-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="bv0ac-0-0"
                              >
                                <span
                                  data-offset-key="bv0ac-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h3
                                  </span>
                                </span>
                              </div>
                            </h3>
                            <blockquote
                              class="Draftail-block--blockquote "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="2ip7q-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="2ip7q-0-0"
                              >
                                <span
                                  data-offset-key="2ip7q-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    blockquote
                                  </span>
                                </span>
                              </div>
                            </blockquote>
                            <ul
                              class="public-DraftStyleDefault-ul"
                              data-offset-key="8r8ss-0-0"
                            >
                              <li
                                class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="8r8ss-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="8r8ss-0-0"
                                >
                                  <span
                                    data-offset-key="8r8ss-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ul
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ul>
                            <ol
                              class="public-DraftStyleDefault-ol"
                              data-offset-key="911hc-0-0"
                            >
                              <li
                                class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="911hc-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="911hc-0-0"
                                >
                                  <span
                                    data-offset-key="911hc-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ol
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ol>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="5aejo-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="5aejo-0-0"
                              >
                                <span
                                  data-offset-key="5aejo-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    link
                                  </span>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Background image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  class="Component-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="ImageTile-imageContainer-id"
                data-tc="product-image"
              >
                <div
                  class="ImageTile-imageOverlay-id"
                >
                  <div
                    class="ImageTile-imageOverlayToolbar-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
                <img
                  alt="Alt text"
                  class="ImageTile-image-id"
                  src="block1.jpg"
                />
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    >
                      Alt text
                    </textarea>
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="backgroundImageAlt"
                      rows="1"
                      style="height:19px"
                    >
                      Alt text
                    </textarea>
                  </div>
                </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-flat-id MuiButton-flatPrimary-id"
                  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"
            />
            <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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </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"
                  >
                    Published
                  </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                          data-tc="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                              <path
                                d="M24 0v24H0V0h24z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-tc="button-pagination-next"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                              <path
                                d="M0 24V0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CollectionProducts-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-colPublished-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CollectionProducts-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-colPublished-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CollectionProducts-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-colPublished-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CollectionProducts-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-colPublished-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this collection easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-expandedSwitchContainer-id"
                >
                  <label
                    class="MuiFormControlLabel-root-id"
                  >
                    <span
                      class="MuiSwitch-root-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <span
                            class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                          />
                          <input
                            checked=""
                            class="MuiPrivateSwitchBase-input-id"
                            name="isPublished"
                            type="checkbox"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiSwitch-bar-id"
                      />
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      <div
                        class="ControlledSwitch-label-id"
                      >
                        Visible
                        <div>
                          since Aug 25, 2018
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                        />
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="isFeatured"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      <span
                        class="ControlledSwitch-labelText-id"
                      >
                        Feature on Homepage
                      </span>
                      <div />
                    </div>
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Collection details loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 CollectionDetails-name-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="testKey-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="testKey-0-0"
                              >
                                <span
                                  data-offset-key="testKey-0-0"
                                >
                                  <br
                                    data-text="true"
                                  />
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Background image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  class="Component-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="Component-imageContainer-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
                  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"
            />
            <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"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id Checkbox-disabled-id"
                        disabled=""
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </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"
                  >
                    Published
                  </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                          data-tc="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                              <path
                                d="M24 0v24H0V0h24z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-tc="button-pagination-next"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                              <path
                                d="M0 24V0h24v24H0z"
                                fill="none"
                              />
                            </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"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id Checkbox-disabled-id"
                        disabled=""
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id CollectionProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      >
                        <span
                          class="Skeleton-skeleton-id"
                        >
                          ‌
                        </span>
                      </div>
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colType-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colPublished-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id CollectionProducts-colActions-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this collection easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
                >
                  <label
                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      class="MuiSwitch-root-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <span
                            class="MuiSwitch-icon-id"
                          />
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            disabled=""
                            name="isPublished"
                            type="checkbox"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiSwitch-bar-id"
                      />
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                    >
                      <div
                        class="ControlledSwitch-label-id"
                      >
                        Hidden
                        <div />
                      </div>
                    </span>
                  </label>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                      disabled=""
                      name="publicationDate"
                      type="date"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                        />
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="isFeatured"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      <span
                        class="ControlledSwitch-labelText-id"
                      >
                        Feature on Homepage
                      </span>
                      <div />
                    </div>
                  </span>
                </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Collections / Collection details no products 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Summer collection
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 CollectionDetails-name-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <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"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor Draftail-Editor--hide-placeholder"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="rosn-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="rosn-0-0"
                              >
                                <span
                                  data-offset-key="rosn-0-0"
                                  style="font-weight:bold"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    bold
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="6tbch-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="6tbch-0-0"
                              >
                                <span
                                  data-offset-key="6tbch-0-0"
                                  style="font-style:italic"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    italic
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="1p044-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="1p044-0-0"
                              >
                                <span
                                  data-offset-key="1p044-0-0"
                                  style="text-decoration:line-through"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    strikethrough
                                  </span>
                                </span>
                              </div>
                            </div>
                            <h1
                              class="Draftail-block--header-one "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="aven6-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="aven6-0-0"
                              >
                                <span
                                  data-offset-key="aven6-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h1
                                  </span>
                                </span>
                              </div>
                            </h1>
                            <h2
                              class="Draftail-block--header-two "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="9rabl-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="9rabl-0-0"
                              >
                                <span
                                  data-offset-key="9rabl-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h2
                                  </span>
                                </span>
                              </div>
                            </h2>
                            <h3
                              class="Draftail-block--header-three "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="bv0ac-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="bv0ac-0-0"
                              >
                                <span
                                  data-offset-key="bv0ac-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h3
                                  </span>
                                </span>
                              </div>
                            </h3>
                            <blockquote
                              class="Draftail-block--blockquote "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="2ip7q-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="2ip7q-0-0"
                              >
                                <span
                                  data-offset-key="2ip7q-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    blockquote
                                  </span>
                                </span>
                              </div>
                            </blockquote>
                            <ul
                              class="public-DraftStyleDefault-ul"
                              data-offset-key="8r8ss-0-0"
                            >
                              <li
                                class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="8r8ss-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="8r8ss-0-0"
                                >
                                  <span
                                    data-offset-key="8r8ss-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ul
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ul>
                            <ol
                              class="public-DraftStyleDefault-ol"
                              data-offset-key="911hc-0-0"
                            >
                              <li
                                class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="911hc-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="911hc-0-0"
                                >
                                  <span
                                    data-offset-key="911hc-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ol
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ol>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="5aejo-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="5aejo-0-0"
                              >
                                <span
                                  data-offset-key="5aejo-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    link
                                  </span>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Background image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  class="Component-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="ImageTile-imageContainer-id"
                data-tc="product-image"
              >
                <div
                  class="ImageTile-imageOverlay-id"
                >
                  <div
                    class="ImageTile-imageOverlayToolbar-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
                <img
                  alt="Alt text"
                  class="ImageTile-image-id"
                  src="block1.jpg"
                />
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    >
                      Alt text
                    </textarea>
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="backgroundImageAlt"
                      rows="1"
                      style="height:19px"
                    >
                      Alt text
                    </textarea>
                  </div>
                </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Products in Summer collection
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
                  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"
            />
            <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"
                  >
                    Published
                  </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                          data-tc="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                              <path
                                d="M24 0v24H0V0h24z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-tc="button-pagination-next"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                              <path
                                d="M0 24V0h24v24H0z"
                                fill="none"
                              />
                            </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
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this collection easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-expandedSwitchContainer-id"
                >
                  <label
                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                  >
                    <span
                      class="MuiSwitch-root-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <span
                            class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                          />
                          <input
                            checked=""
                            class="MuiPrivateSwitchBase-input-id"
                            disabled=""
                            name="isPublished"
                            type="checkbox"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiSwitch-bar-id"
                      />
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                    >
                      <div
                        class="ControlledSwitch-label-id"
                      >
                        Visible
                        <div>
                          since Aug 25, 2018
                        </div>
                      </div>
                    </span>
                  </label>
                </div>
                <div
                  class="FormSpacer-spacer-id"
                />
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                        />
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="isFeatured"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      <span
                        class="ControlledSwitch-labelText-id"
                      >
                        Feature on Homepage
                      </span>
                      <div />
                    </div>
                  </span>
                </label>
              </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Collections
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add collection
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colName-id"
              scope="col"
            >
              Category Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colProducts-id"
              scope="col"
            >
              No. of Products
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colAvailability-id"
              scope="col"
            >
              Availability
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id CollectionList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
            >
              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"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Published
              </div>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id CollectionList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
            >
              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"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Published
              </div>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id CollectionList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
            >
              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"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Published
              </div>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id CollectionList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
            >
              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"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Published
              </div>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id CollectionList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
            >
              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"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Published
              </div>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id CollectionList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
            >
              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"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Published
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Collections
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add collection
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colName-id"
              scope="col"
            >
              Category Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colProducts-id"
              scope="col"
            >
              No. of Products
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CollectionList-colAvailability-id"
              scope="col"
            >
              Availability
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id CollectionList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colName-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colProducts-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CollectionList-colAvailability-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add collection
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 CollectionDetails-name-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-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="testKey-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="testKey-0-0"
                              >
                                <span
                                  data-offset-key="testKey-0-0"
                                >
                                  <br
                                    data-text="true"
                                  />
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Background image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  class="Component-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
                  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"
                  role="presentation"
                  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>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
                >
                  Drop here to upload
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this collection easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
                >
                  Availability
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
                >
                  <div
                    class="CardTitle-root-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
                    >
                      <label
                        class="MuiFormControlLabel-root-id"
                      >
                        <span
                          class="MuiSwitch-root-id"
                        >
                          <span
                            class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <span
                                class="MuiSwitch-icon-id"
                              />
                              <input
                                class="MuiPrivateSwitchBase-input-id"
                                name="isPublished"
                                type="checkbox"
                              />
                            </span>
                          </span>
                          <span
                            class="MuiSwitch-bar-id"
                          />
                        </span>
                        <span
                          class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                        >
                          <div
                            class="ControlledSwitch-label-id"
                          >
                            Hidden
                            <div />
                          </div>
                        </span>
                      </label>
                    </div>
                    <div
                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-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"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                          name="publicationDate"
                          type="date"
                          value=""
                        />
                      </div>
                    </div>
                    <div
                      class="FormSpacer-spacer-id"
                    />
                  </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add collection
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 CollectionDetails-name-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="testKey-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="testKey-0-0"
                              >
                                <span
                                  data-offset-key="testKey-0-0"
                                >
                                  <br
                                    data-text="true"
                                  />
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Background image (optional)
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  class="Component-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
                  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"
                  role="presentation"
                  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>
                <p
                  class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
                >
                  Drop here to upload
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this collection easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div>
            <div
              class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
            >
              <div
                class="CardTitle-root-id"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
                >
                  Availability
                </span>
                <div
                  class="CardTitle-toolbar-id"
                />
              </div>
              <div
                class="CardTitle-children-id"
              />
              <hr
                class="CardTitle-hr-id"
              />
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
                >
                  <div
                    class="CardTitle-root-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
                    >
                      <label
                        class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                      >
                        <span
                          class="MuiSwitch-root-id"
                        >
                          <span
                            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                            tabindex="-1"
                          >
                            <span
                              class="MuiIconButton-label-id"
                            >
                              <span
                                class="MuiSwitch-icon-id"
                              />
                              <input
                                class="MuiPrivateSwitchBase-input-id"
                                disabled=""
                                name="isPublished"
                                type="checkbox"
                              />
                            </span>
                          </span>
                          <span
                            class="MuiSwitch-bar-id"
                          />
                        </span>
                        <span
                          class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                        >
                          <div
                            class="ControlledSwitch-label-id"
                          >
                            Hidden
                            <div />
                          </div>
                        </span>
                      </label>
                    </div>
                    <div
                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                          disabled=""
                          name="publicationDate"
                          type="date"
                          value=""
                        />
                      </div>
                    </div>
                    <div
                      class="FormSpacer-spacer-id"
                    />
                  </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="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Configuration
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="ConfigurationPage-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M40.1538 15.3077C40.1538 18.8763 37.2609 21.7692 33.6923 21.7692C30.1237 21.7692 27.2308 18.8763 27.2308 15.3077C27.2308 11.7391 30.1237 8.84615 33.6923 8.84615C37.2609 8.84615 40.1538 11.7391 40.1538 15.3077ZM42 15.3077C42 19.8959 38.2805 23.6154 33.6923 23.6154C29.1041 23.6154 25.3846 19.8959 25.3846 15.3077C25.3846 10.7195 29.1041 7 33.6923 7C38.2805 7 42 10.7195 42 15.3077ZM20.7692 14.3846H7.84615V27.3077H20.7692V14.3846ZM6 12.5385V29.1538H22.6154V12.5385H6ZM28.1554 24.5385L18.5625 41.1538H37.7483L28.1554 24.5385ZM28.1554 28.2308L21.7601 39.3077H34.5507L28.1554 28.2308Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.94118"
                  x2="35.808"
                  y1="7"
                  y2="46.78"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Attributes
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Determine attributes used to create product types
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M40.1538 15.3077C40.1538 18.8763 37.2609 21.7692 33.6923 21.7692C30.1237 21.7692 27.2308 18.8763 27.2308 15.3077C27.2308 11.7391 30.1237 8.84615 33.6923 8.84615C37.2609 8.84615 40.1538 11.7391 40.1538 15.3077ZM42 15.3077C42 19.8959 38.2805 23.6154 33.6923 23.6154C29.1041 23.6154 25.3846 19.8959 25.3846 15.3077C25.3846 10.7195 29.1041 7 33.6923 7C38.2805 7 42 10.7195 42 15.3077ZM20.7692 14.3846H7.84615V27.3077H20.7692V14.3846ZM6 12.5385V29.1538H22.6154V12.5385H6ZM28.1554 24.5385L18.5625 41.1538H37.7483L28.1554 24.5385ZM28.1554 28.2308L21.7601 39.3077H34.5507L28.1554 28.2308Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.94118"
                  x2="35.808"
                  y1="7"
                  y2="46.78"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Product Types
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Define types of products you sell
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M24 13.2C24 16.1823 21.5823 18.6 18.6 18.6C15.6177 18.6 13.2 16.1823 13.2 13.2C13.2 10.2177 15.6177 7.8 18.6 7.8C21.5823 7.8 24 10.2177 24 13.2ZM25.8 13.2C25.8 17.1764 22.5765 20.4 18.6 20.4C14.6236 20.4 11.4 17.1764 11.4 13.2C11.4 9.22355 14.6236 6 18.6 6C22.5765 6 25.8 9.22355 25.8 13.2ZM8.0821 40.2L10.449 24H25.851L26.7355 30.0541L26.7 30.3H26.7715L28.2179 40.2H8.0821ZM28.5906 30.3L30.3 42H6L8.89286 22.2H27.4071L27.6403 23.7956L28.5214 17.7H34.35H40.1786L42 30.3H28.5906ZM34.35 17.7C31.6162 17.7 29.4 15.4838 29.4 12.75C29.4 10.0162 31.6162 7.8 34.35 7.8C37.0838 7.8 39.3 10.0162 39.3 12.75C39.3 15.4838 37.0838 17.7 34.35 17.7ZM34.35 15.9C36.0897 15.9 37.5 14.4897 37.5 12.75C37.5 11.0103 36.0897 9.6 34.35 9.6C32.6103 9.6 31.2 11.0103 31.2 12.75C31.2 14.4897 32.6103 15.9 34.35 15.9ZM28.7789 28.5L30.0799 19.5H38.6201L39.9211 28.5H28.7789Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.94118"
                  x2="37.8615"
                  y1="6"
                  y2="46.2508"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Staff Members
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Manage your employees and their permissions
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M6 6H32.4V17.04H42V35.6776L35.6776 42H12.72V23.8424L14.2424 22.32H6V6ZM30.48 9.02192V17.04H19.5224L16.1624 20.4H7.92V8.77191L19.4404 14.7625L30.48 9.02192ZM28.4374 7.92H10.4434L19.4404 12.5984L28.4374 7.92ZM17.04 22.32H16.9576L15.9976 23.28H34.4025L38.7225 18.96H20.3176L17.04 22.2376V22.32ZM35.28 25.1178L40.08 20.3178V34.8824L35.28 39.6824V25.1178ZM14.64 25.2V40.08H33.36V25.2H14.64ZM22.8 33.84H30V31.92H22.8V33.84ZM22.8 37.2H28.56V35.28H22.8V37.2Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="6"
                  x2="45.6"
                  y1="6"
                  y2="47.1429"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Shipping Methods
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Manage how you ship out orders
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M8 6H37.3684V24.9474H35.4737V7.89474H9.89474V40.1053H35.4737V37.7368H37.3684V42H8V6ZM13.6848 24H16.5269V26.8421H13.6848V24ZM21.2624 24H18.4203V26.8421H21.2624V24ZM23.1594 24H26.0015V26.8421H23.1594V24ZM30.737 24H27.8949V26.8421H30.737V24ZM13.6848 28.7355H16.5269V31.5777H13.6848V28.7355ZM21.2624 28.7355H18.4203V31.5777H21.2624V28.7355ZM23.1594 28.7355H26.0015V31.5777H23.1594V28.7355ZM16.5269 33.4746H13.6848V36.3167H16.5269V33.4746ZM18.4203 33.4746H21.2624V36.3167H18.4203V33.4746ZM26.0015 33.4746H23.1594V36.3167H26.0015V33.4746ZM29.79 14.5252H15.5795V19.262H29.79V14.5252ZM13.6848 12.6305V21.1568H31.6848V12.6305H13.6848ZM40.2116 33.4746H37.3695V36.3167H40.2116V33.4746ZM31.6848 27.7898H34.5269V30.632H31.6848V27.7898ZM32.3531 36.9845L40.8794 28.4581L39.5396 27.1184L31.0133 35.6447L32.3531 36.9845Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="7.03296"
                  x2="40.4173"
                  y1="6"
                  y2="43.2798"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Taxes
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Manage how your store charges tax
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M23.5868 40.7841C32.5324 40.7841 39.7841 33.5324 39.7841 24.5868C39.7841 15.6413 32.5324 8.38954 23.5868 8.38954C14.6413 8.38954 7.38954 15.6413 7.38954 24.5868C7.38954 33.5324 14.6413 40.7841 23.5868 40.7841ZM23.5868 42.5838C33.5263 42.5838 41.5838 34.5263 41.5838 24.5868C41.5838 14.6474 33.5263 6.58984 23.5868 6.58984C13.6474 6.58984 5.58984 14.6474 5.58984 24.5868C5.58984 34.5263 13.6474 42.5838 23.5868 42.5838Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <path
                clip-rule="evenodd"
                d="M30.4053 12.7808L17.5705 20.8424L22.3034 23.575C22.7981 22.9452 23.6933 22.7584 24.407 23.1704C25.1207 23.5825 25.4065 24.4512 25.1084 25.1945L29.8412 27.9269L30.4053 12.7808ZM22.0683 23.9832C21.7721 24.7258 22.0581 25.5927 22.7709 26.0042C23.4837 26.4158 24.3774 26.23 24.8725 25.6022L29.6052 28.3346L16.7703 36.3963L17.3345 21.2501L22.0683 23.9832ZM28.4802 16.1153L21.0575 20.7775L28.1539 24.8747L28.4802 16.1153Z"
                fill="url(#paint1_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.5312"
                  x2="37.4461"
                  y1="6.58984"
                  y2="46.8339"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint1_linear"
                  x1="23.9086"
                  x2="36.5382"
                  y1="9.02991"
                  y2="33.2176"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Navigation
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Define how users can navigate through your store
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M34.6387 11.9972L33.7134 14.5158L34.3905 15.2663C35.8323 16.8641 36.9274 18.7948 37.5523 20.9335L37.8454 21.9364L40.3256 22.3641V27.8214L37.8454 28.2491L37.5524 29.252C36.9666 31.2566 35.9678 33.0786 34.6575 34.615L34.0222 35.36L34.9932 38.0028L30.0553 40.8475L28.4228 38.897L27.4032 39.1548C26.3148 39.43 25.1752 39.5765 24 39.5765C22.8248 39.5765 21.6852 39.43 20.5968 39.1548L19.5772 38.897L17.9447 40.8475L13.0068 38.0028L13.9778 35.36L13.3425 34.615C12.0322 33.0786 11.0334 31.2566 10.4476 29.252L10.1546 28.2491L7.67442 27.8214L7.67442 22.3641L10.1546 21.9364L10.4477 20.9335C11.0726 18.7948 12.1677 16.8641 13.6095 15.2663L14.2866 14.5158L13.3612 11.9972L18.2992 9.15248L19.9813 11.1624L20.9758 10.9407C21.9487 10.7237 22.9603 10.6092 24 10.6092C25.0397 10.6092 26.0513 10.7237 27.0242 10.9407L28.0187 11.1624L29.7008 9.15248L34.6387 11.9972ZM42 29.2318V20.9537L39.1595 20.4639C38.4629 18.0799 37.2421 15.927 35.6337 14.1445L36.6969 11.2506L29.3188 7L27.3886 9.30636C26.2969 9.06298 25.1631 8.93475 24 8.93475C22.8369 8.93475 21.7031 9.06298 20.6114 9.30636L18.6812 7L11.303 11.2506L12.3663 14.1445C10.7579 15.927 9.53708 18.0799 8.84047 20.4639L6 20.9537V29.2318L8.84043 29.7216C9.49337 31.9562 10.6069 33.9878 12.0685 35.7016L10.9486 38.7495L18.3267 43L20.1863 40.7781C21.4077 41.087 22.6851 41.2509 24 41.2509C25.3149 41.2509 26.5923 41.087 27.8137 40.7781L29.6733 43L37.0514 38.7495L35.9315 35.7016C37.3931 33.9878 38.5066 31.9562 39.1596 29.7216L42 29.2318ZM31.5996 25.0013C31.5996 29.1977 28.1977 32.5996 24.0013 32.5996C19.8049 32.5996 16.403 29.1977 16.403 25.0013C16.403 20.8049 19.8049 17.403 24.0013 17.403C28.1977 17.403 31.5996 20.8049 31.5996 25.0013ZM33.274 25.0013C33.274 30.1225 29.1225 34.274 24.0013 34.274C18.8801 34.274 14.7286 30.1225 14.7286 25.0013C14.7286 19.8801 18.8801 15.7286 24.0013 15.7286C29.1225 15.7286 33.274 19.8801 33.274 25.0013Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.94118"
                  x2="37.8615"
                  y1="7"
                  y2="47.2508"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Site Settings
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              View and update your site settings
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M22.3617 7H35.5267L42.0006 13.4739V36.5548H28.2148V34.7644H40.2103V14.2155L40.012 14.0172H34.8V8.80523L34.7851 8.79036H24.1521V12.3573H22.3617V7ZM6 11.4613H19.165L25.6389 17.9352V41.0161H24.7437H6V11.4613ZM18.6 13.4283V19.4172H23.8485V39.2257H7.79036V13.2517H18.4234L18.6 13.4283ZM22.2 23.0172H9.6V25.7172H22.2V23.0172ZM9.6 27.5172H22.2V30.2172H9.6V27.5172ZM37.5 16.7172H28.5V19.4172H37.5V16.7172ZM28.5 21.2172H37.5V31.1172H28.5V21.2172ZM22.2 32.0172H9.6V34.7172H22.2V32.0172Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.94116"
                  x2="35.6523"
                  y1="7"
                  y2="46.7403"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Pages
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Manage and add additional pages
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              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>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Plugins
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              View and update your plugins and their settings.
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Configuration partial access 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Configuration
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="ConfigurationPage-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M40.1538 15.3077C40.1538 18.8763 37.2609 21.7692 33.6923 21.7692C30.1237 21.7692 27.2308 18.8763 27.2308 15.3077C27.2308 11.7391 30.1237 8.84615 33.6923 8.84615C37.2609 8.84615 40.1538 11.7391 40.1538 15.3077ZM42 15.3077C42 19.8959 38.2805 23.6154 33.6923 23.6154C29.1041 23.6154 25.3846 19.8959 25.3846 15.3077C25.3846 10.7195 29.1041 7 33.6923 7C38.2805 7 42 10.7195 42 15.3077ZM20.7692 14.3846H7.84615V27.3077H20.7692V14.3846ZM6 12.5385V29.1538H22.6154V12.5385H6ZM28.1554 24.5385L18.5625 41.1538H37.7483L28.1554 24.5385ZM28.1554 28.2308L21.7601 39.3077H34.5507L28.1554 28.2308Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.94118"
                  x2="35.808"
                  y1="7"
                  y2="46.78"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Attributes
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Determine attributes used to create product types
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M40.1538 15.3077C40.1538 18.8763 37.2609 21.7692 33.6923 21.7692C30.1237 21.7692 27.2308 18.8763 27.2308 15.3077C27.2308 11.7391 30.1237 8.84615 33.6923 8.84615C37.2609 8.84615 40.1538 11.7391 40.1538 15.3077ZM42 15.3077C42 19.8959 38.2805 23.6154 33.6923 23.6154C29.1041 23.6154 25.3846 19.8959 25.3846 15.3077C25.3846 10.7195 29.1041 7 33.6923 7C38.2805 7 42 10.7195 42 15.3077ZM20.7692 14.3846H7.84615V27.3077H20.7692V14.3846ZM6 12.5385V29.1538H22.6154V12.5385H6ZM28.1554 24.5385L18.5625 41.1538H37.7483L28.1554 24.5385ZM28.1554 28.2308L21.7601 39.3077H34.5507L28.1554 28.2308Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.94118"
                  x2="35.808"
                  y1="7"
                  y2="46.78"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Product Types
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Define types of products you sell
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M8 6H37.3684V24.9474H35.4737V7.89474H9.89474V40.1053H35.4737V37.7368H37.3684V42H8V6ZM13.6848 24H16.5269V26.8421H13.6848V24ZM21.2624 24H18.4203V26.8421H21.2624V24ZM23.1594 24H26.0015V26.8421H23.1594V24ZM30.737 24H27.8949V26.8421H30.737V24ZM13.6848 28.7355H16.5269V31.5777H13.6848V28.7355ZM21.2624 28.7355H18.4203V31.5777H21.2624V28.7355ZM23.1594 28.7355H26.0015V31.5777H23.1594V28.7355ZM16.5269 33.4746H13.6848V36.3167H16.5269V33.4746ZM18.4203 33.4746H21.2624V36.3167H18.4203V33.4746ZM26.0015 33.4746H23.1594V36.3167H26.0015V33.4746ZM29.79 14.5252H15.5795V19.262H29.79V14.5252ZM13.6848 12.6305V21.1568H31.6848V12.6305H13.6848ZM40.2116 33.4746H37.3695V36.3167H40.2116V33.4746ZM31.6848 27.7898H34.5269V30.632H31.6848V27.7898ZM32.3531 36.9845L40.8794 28.4581L39.5396 27.1184L31.0133 35.6447L32.3531 36.9845Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="7.03296"
                  x2="40.4173"
                  y1="6"
                  y2="43.2798"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Taxes
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Manage how your store charges tax
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M23.5868 40.7841C32.5324 40.7841 39.7841 33.5324 39.7841 24.5868C39.7841 15.6413 32.5324 8.38954 23.5868 8.38954C14.6413 8.38954 7.38954 15.6413 7.38954 24.5868C7.38954 33.5324 14.6413 40.7841 23.5868 40.7841ZM23.5868 42.5838C33.5263 42.5838 41.5838 34.5263 41.5838 24.5868C41.5838 14.6474 33.5263 6.58984 23.5868 6.58984C13.6474 6.58984 5.58984 14.6474 5.58984 24.5868C5.58984 34.5263 13.6474 42.5838 23.5868 42.5838Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <path
                clip-rule="evenodd"
                d="M30.4053 12.7808L17.5705 20.8424L22.3034 23.575C22.7981 22.9452 23.6933 22.7584 24.407 23.1704C25.1207 23.5825 25.4065 24.4512 25.1084 25.1945L29.8412 27.9269L30.4053 12.7808ZM22.0683 23.9832C21.7721 24.7258 22.0581 25.5927 22.7709 26.0042C23.4837 26.4158 24.3774 26.23 24.8725 25.6022L29.6052 28.3346L16.7703 36.3963L17.3345 21.2501L22.0683 23.9832ZM28.4802 16.1153L21.0575 20.7775L28.1539 24.8747L28.4802 16.1153Z"
                fill="url(#paint1_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.5312"
                  x2="37.4461"
                  y1="6.58984"
                  y2="46.8339"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint1_linear"
                  x1="23.9086"
                  x2="36.5382"
                  y1="9.02991"
                  y2="33.2176"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Navigation
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Define how users can navigate through your store
            </p>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ConfigurationPage-card-id"
      >
        <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"
              role="presentation"
              viewBox="0 0 44 44"
            >
              <path
                clip-rule="evenodd"
                d="M22.3617 7H35.5267L42.0006 13.4739V36.5548H28.2148V34.7644H40.2103V14.2155L40.012 14.0172H34.8V8.80523L34.7851 8.79036H24.1521V12.3573H22.3617V7ZM6 11.4613H19.165L25.6389 17.9352V41.0161H24.7437H6V11.4613ZM18.6 13.4283V19.4172H23.8485V39.2257H7.79036V13.2517H18.4234L18.6 13.4283ZM22.2 23.0172H9.6V25.7172H22.2V23.0172ZM9.6 27.5172H22.2V30.2172H9.6V27.5172ZM37.5 16.7172H28.5V19.4172H37.5V16.7172ZM28.5 21.2172H37.5V31.1172H28.5V21.2172ZM22.2 32.0172H9.6V34.7172H22.2V32.0172Z"
                fill="url(#paint0_linear)"
                fill-rule="evenodd"
              />
              <defs>
                <linearGradient
                  gradientUnits="userSpaceOnUse"
                  id="paint0_linear"
                  x1="4.94116"
                  x2="35.6523"
                  y1="7"
                  y2="46.7403"
                >
                  <stop
                    stop-color="#06847B"
                  />
                  <stop
                    offset="1"
                    stop-color="#3EE7CD"
                  />
                </linearGradient>
              </defs>
            </svg>
          </div>
          <div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id ConfigurationPage-sectionTitle-id"
            >
              Pages
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id ConfigurationPage-sectionDescription-id"
            >
              Manage and add additional pages
            </p>
          </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Tom Cooper's Address Book
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add address
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="CustomerAddressListPage-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id CustomerAddress-card-id"
      >
        <div
          class="CardTitle-root-id CardTitle-constantHeight-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Address 1
            <span
              class="MuiTypography-root-id MuiTypography-caption-id"
            >
              Default Address
            </span>
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M0 0h24v24H0z"
                      fill="none"
                    />
                    <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"
          >
            <span
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Elizabeth Vaughn
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              419 Ruiz Orchard Apt. 199
              <br />
              0238 Cremin Freeway
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
               52203 Port Danielshire
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Szwecja
            </span>
          </address>
        </div>
        <div
          class="CustomerAddress-actionsContainer-id"
        >
          <div
            class="MuiCardActions-root-id CustomerAddress-actions-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Remove
              </span>
            </button>
          </div>
        </div>
      </div>
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id CustomerAddress-card-id"
      >
        <div
          class="CardTitle-root-id CardTitle-constantHeight-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            Address 2
            <span
              class="MuiTypography-root-id MuiTypography-caption-id"
            />
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M0 0h24v24H0z"
                      fill="none"
                    />
                    <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"
          >
            <span
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Timmy Macejkovic
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              0238 Cremin Freeway
              <br />
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
               15926 West Feliciamouth, Montana
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Japan
            </span>
          </address>
        </div>
        <div
          class="CustomerAddress-actionsContainer-id"
        >
          <div
            class="MuiCardActions-root-id CustomerAddress-actions-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Remove
              </span>
            </button>
          </div>
        </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        ...'s Address Book
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add address
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="CustomerAddressListPage-root-id"
    >
      <div
        class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id CustomerAddress-card-id"
      >
        <div
          class="CardTitle-root-id CardTitle-constantHeight-id"
        >
          <span
            class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
          >
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </span>
          </span>
          <div
            class="CardTitle-toolbar-id"
          >
            <div>
              <button
                aria-haspopup="true"
                aria-label="More"
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id CardMenu-iconButton-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    viewBox="0 0 24 24"
                  >
                    <path
                      d="M0 0h24v24H0z"
                      fill="none"
                    />
                    <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"
          >
            ‌
          </span>
        </div>
        <div
          class="CustomerAddress-actionsContainer-id"
        >
          <div
            class="MuiCardActions-root-id CustomerAddress-actions-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id MuiCardActions-action-id"
              disabled=""
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Edit
              </span>
            </button>
            <button
              class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id MuiCardActions-action-id"
              disabled=""
              tabindex="-1"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Remove
              </span>
            </button>
          </div>
        </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id"
      >
        There is no address to show for this customer
      </h5>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id CustomerAddressListPage-description-id"
      >
        This customer doesn’t have any adresses added to his address book. You can add address using the button below.
      </p>
      <button
        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id CustomerAddressListPage-addButton-id"
        tabindex="0"
        type="button"
      >
        <span
          class="MuiButton-label-id"
        >
          Add address
          <svg
            aria-hidden="true"
            class="MuiSvgIcon-root-id"
            focusable="false"
            role="presentation"
            viewBox="0 0 24 24"
          >
            <path
              d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
            />
            <path
              d="M0 0h24v24H0z"
              fill="none"
            />
          </svg>
        </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add customer
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerFirstName"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerLastName"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="email"
                      type="email"
                      value=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id CustomerCreateAddress-overflow-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                The primary address of this customer.
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="firstName"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="lastName"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="companyName"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="phone"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-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"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Enter any extra infotmation regarding this customer.
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add customer
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerFirstName"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="customerLastName"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="email"
                      type="email"
                      value=""
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Generic form error
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id CustomerCreateAddress-overflow-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                The primary address of this customer.
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="firstName"
                        type="text"
                        value=""
                      />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="lastName"
                        type="text"
                        value=""
                      />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="companyName"
                        type="text"
                        value=""
                      />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="phone"
                        type="text"
                        value=""
                      />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="city"
                        type="text"
                        value=""
                      />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="postalCode"
                        type="text"
                        value=""
                      />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="true"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                      </div>
                      <p
                        class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                      >
                        Generic form error
                      </p>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="countryArea"
                        type="text"
                        value=""
                      />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Enter any extra infotmation regarding this customer.
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="true"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add customer
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="customerFirstName"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="customerLastName"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                      disabled=""
                      name="email"
                      type="email"
                      value=""
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id CustomerCreateAddress-overflow-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                The primary address of this customer.
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="firstName"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="lastName"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="companyName"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="phone"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="streetAddress1"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="streetAddress2"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="city"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="postalCode"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="AddressEdit-root-id"
              >
                <div>
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                        role="combobox"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <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>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="countryArea"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Notes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Enter any extra infotmation regarding this customer.
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      disabled=""
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Tom Cooper
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Customer since: May 2017
                </span>
              </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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="CustomerDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Recent orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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-paddingDense-id"
                    scope="col"
                  >
                    No. of Order
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CustomerOrders-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    #8234
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Fully paid
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                  >
                    $1,215.89
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id CustomerAddresses-label-id"
              >
                Address
              </p>
              <address
                style="font-style:inherit"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Elizabeth Vaughn
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                   52203 Port Danielshire
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Szwecja
                </span>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last login
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last order
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Tom Cooper
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Customer since: May 2017
                </span>
              </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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="CustomerDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Recent orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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-paddingDense-id"
                    scope="col"
                  >
                    No. of Order
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CustomerOrders-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    #8234
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Fully paid
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                  >
                    $1,215.89
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id CustomerAddresses-label-id"
              >
                Billing address
              </p>
              <address
                style="font-style:inherit"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Elizabeth Vaughn
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                   52203 Port Danielshire
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Szwecja
                </span>
              </address>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id CustomerAddresses-label-id"
              >
                Shipping address
              </p>
              <address
                style="font-style:inherit"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Elizabeth Vaughn
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                   52203 Port Danielshire
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Szwecja
                </span>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last login
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last order
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Tom Cooper
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Customer since: May 2017
                </span>
              </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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="CustomerDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Generic form error
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Generic form error
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Recent orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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-paddingDense-id"
                    scope="col"
                  >
                    No. of Order
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CustomerOrders-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    #8234
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Fully paid
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                  >
                    $1,215.89
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id CustomerAddresses-label-id"
              >
                Address
              </p>
              <address
                style="font-style:inherit"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Elizabeth Vaughn
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                   52203 Port Danielshire
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Szwecja
                </span>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last login
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last order
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
                <span
                  class="Skeleton-skeleton-id"
                  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"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="isActive"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="CustomerDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="firstName"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="lastName"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                    disabled=""
                    name="email"
                    type="email"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-multiline-id MuiOutlinedInput-multiline-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      disabled=""
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Recent orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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-paddingDense-id"
                    scope="col"
                  >
                    No. of Order
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id CustomerAddresses-label-id"
              >
                Address
              </p>
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last login
              </span>
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last order
              </span>
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Tom Cooper
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Customer since: May 2017
                </span>
              </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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="CustomerDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Recent orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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-paddingDense-id"
                    scope="col"
                  >
                    No. of Order
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CustomerOrders-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    #8234
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Fully paid
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                  >
                    $1,215.89
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id CustomerAddresses-label-id"
              >
                Address
              </p>
              <address
                style="font-style:inherit"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Elizabeth Vaughn
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                   52203 Port Danielshire
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Szwecja
                </span>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last login
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                -
              </h6>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last order
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Tom Cooper
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Customer since: May 2017
                </span>
              </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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="CustomerDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Recent orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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-paddingDense-id"
                    scope="col"
                  >
                    No. of Order
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CustomerOrders-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    #8234
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Fully paid
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                  >
                    $1,215.89
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id CustomerAddresses-label-id"
              >
                Address
              </p>
              <address
                style="font-style:inherit"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Elizabeth Vaughn
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                   52203 Port Danielshire
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Szwecja
                </span>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last login
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last order
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                -
              </h6>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Tom Cooper
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Customer since: May 2017
                </span>
              </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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="CustomerDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Recent orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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-paddingDense-id"
                    scope="col"
                  >
                    No. of Order
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CustomerOrders-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    #8234
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Fully paid
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                  >
                    $1,215.89
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                This customer has no addresses yet
              </p>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last login
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last order
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Tom Cooper
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Customer since: May 2017
                </span>
              </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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="CustomerDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Recent orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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-paddingDense-id"
                    scope="col"
                  >
                    No. of Order
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CustomerOrders-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    #8234
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Fully paid
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                  >
                    $1,215.89
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id CustomerAddresses-label-id"
              >
                Shipping address
              </p>
              <address
                style="font-style:inherit"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Elizabeth Vaughn
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                   52203 Port Danielshire
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Szwecja
                </span>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last login
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last order
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Tom Cooper
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CustomerDetails-cardTitle-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id"
                >
                  Customer since: May 2017
                </span>
              </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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  User account active
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="CustomerDetails-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    First Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="firstName"
                      type="text"
                      value="Tom"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Last Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="lastName"
                      type="text"
                      value="Cooper"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  E-mail Address
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="email"
                    type="email"
                    value="elizabeth.vaughn@example.com"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="note"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Recent orders
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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-paddingDense-id"
                    scope="col"
                  >
                    No. of Order
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Date
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                    scope="col"
                  >
                    Total
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id CustomerOrders-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id"
                  >
                    #8234
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Fully paid
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id CustomerOrders-textRight-id"
                  >
                    $1,215.89
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Address Information
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id CustomerAddresses-label-id"
              >
                Billing address
              </p>
              <address
                style="font-style:inherit"
              >
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Elizabeth Vaughn
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  419 Ruiz Orchard Apt. 199
                  <br />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                   52203 Port Danielshire
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Szwecja
                </span>
              </address>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last login
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id CustomerStats-label-id"
              >
                Last order
              </span>
              <h6
                class="MuiTypography-root-id MuiTypography-h6-id CustomerStats-value-id"
              >
                <time
                  class=""
                  datetime="1525685850124"
                  title="May 7, 2018 5:37 AM"
                >
                  3 months ago
                </time>
              </h6>
            </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Customers
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add customer
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colName-id"
              scope="col"
            >
              Customer Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colEmail-id"
              scope="col"
            >
              Customer Email
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colOrders-id"
              scope="col"
            >
              No. of Orders
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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 MuiTableRow-hover-id CustomerList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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>
`;

exports[`Storyshots Views / Customers / Customer list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Customers
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add customer
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colName-id"
              scope="col"
            >
              Customer Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colEmail-id"
              scope="col"
            >
              Customer Email
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colOrders-id"
              scope="col"
            >
              No. of Orders
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id CustomerList-colOrders-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Customers
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add customer
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 CustomerList-colName-id"
              scope="col"
            >
              Customer Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colEmail-id"
              scope="col"
            >
              Customer Email
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id CustomerList-colOrders-id"
              scope="col"
            >
              No. of Orders
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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>
`;

exports[`Storyshots Views / Discounts / Sale create default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create Sale
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleInfo-root-id"
            >
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value=""
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
              >
                Time Frame
              </h6>
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="startDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
              <div
                class="MuiFormControl-root-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"
                >
                  End Date
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="endDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create Sale
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleInfo-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value=""
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
              >
                Time Frame
              </h6>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="startDate"
                    type="date"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  End Date
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="endDate"
                    type="date"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create Sale
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleInfo-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    min="0"
                    name="value"
                    type="number"
                    value=""
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
              >
                Time Frame
              </h6>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                    disabled=""
                    name="startDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  End Date
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                    disabled=""
                    name="endDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Happy minute day!
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleInfo-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="30"
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      %
                    </span>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
              >
                Time Frame
              </h6>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="startDate"
                    type="date"
                    value="2019-01-03"
                  />
                </div>
              </div>
              <div
                class="MuiFormControl-root-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"
                >
                  End Date
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="endDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Products (4)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Eligible Collections
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-wideColumn-id"
                    scope="col"
                  >
                    Collection name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCollections-textRight-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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                          data-tc="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                              <path
                                d="M24 0v24H0V0h24z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-tc="button-pagination-next"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                              <path
                                d="M0 24V0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountCollections-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Winter Collection
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-textRight-id"
                  >
                    110
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCollections-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Happy minute day!
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                30%
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jan 3, 2019
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                -
              </p>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Happy minute day!
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleInfo-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="30"
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      %
                    </span>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
              >
                Time Frame
              </h6>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="startDate"
                    type="date"
                    value="2019-01-03"
                  />
                </div>
              </div>
              <div
                class="MuiFormControl-root-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"
                >
                  End Date
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="endDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Products (4)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Eligible Categories
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
                    scope="col"
                  >
                    Category name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                          data-tc="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                              <path
                                d="M24 0v24H0V0h24z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-tc="button-pagination-next"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                              <path
                                d="M0 24V0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountCategories-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Apparel
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
                  >
                    18
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Happy minute day!
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                30%
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jan 3, 2019
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                -
              </p>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Happy minute day!
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleInfo-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="30"
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      %
                    </span>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
              >
                Time Frame
              </h6>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="startDate"
                    type="date"
                    value="2019-01-03"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  End Date
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="endDate"
                    type="date"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Products (4)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Eligible Categories
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
                    scope="col"
                  >
                    Category name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                          data-tc="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                              <path
                                d="M24 0v24H0V0h24z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-tc="button-pagination-next"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                              <path
                                d="M0 24V0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountCategories-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    Apparel
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
                  >
                    18
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Happy minute day!
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                30%
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jan 3, 2019
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                -
              </p>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleInfo-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    min="0"
                    name="value"
                    type="number"
                    value=""
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
              >
                Time Frame
              </h6>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                    disabled=""
                    name="startDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  End Date
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                    disabled=""
                    name="endDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
            >
              Categories (…)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Collections (…)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Products (…)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Eligible Categories
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id Checkbox-disabled-id"
                        disabled=""
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-wideColumn-id"
                    scope="col"
                  >
                    Category name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id DiscountCategories-textRight-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 MuiToolbar-gutters-id TablePagination-toolbar-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                          data-tc="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                              <path
                                d="M24 0v24H0V0h24z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                          data-tc="button-pagination-next"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                              <path
                                d="M0 24V0h24v24H0z"
                                fill="none"
                              />
                            </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"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id Checkbox-disabled-id"
                        disabled=""
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-textRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id DiscountCategories-iconCell-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Happy minute day!
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SaleInfo-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Happy minute day!"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="30"
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      %
                    </span>
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                </div>
              </div>
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardContent-root-id SalePricing-root-id"
            >
              <h6
                class="MuiTypography-root-id MuiTypography-subtitle1-id SalePricing-subheading-id"
              >
                Time Frame
              </h6>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="startDate"
                    type="date"
                    value="2019-01-03"
                  />
                </div>
              </div>
              <div
                class="MuiFormControl-root-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"
                >
                  End Date
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="endDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="TabContainer-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Categories (2)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id"
            >
              Collections (4)
            </span>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id Tab-root-id Tab-active-id"
            >
              Products (4)
            </span>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Eligible Products
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
            />
            <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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </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"
                  >
                    Published
                  </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="5"
                  >
                    <div
                      class="MuiToolbar-root-id MuiToolbar-regular-id MuiToolbar-gutters-id TablePagination-toolbar-id"
                    >
                      <div
                        class="TablePagination-spacer-id"
                      />
                      <div
                        class="TablePaginationActions-root-id"
                      >
                        <button
                          class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                          data-tc="button-pagination-back"
                          disabled=""
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M14 7l-5 5 5 5V7z"
                              />
                              <path
                                d="M24 0v24H0V0h24z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                          data-tc="button-pagination-next"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M10 17l5-5-5-5v10z"
                              />
                              <path
                                d="M0 24V0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </td>
                </tr>
              </tfoot>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountProducts-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-colPublished-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountProducts-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-colPublished-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountProducts-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-colPublished-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id DiscountProducts-tableRow-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id DiscountProducts-colName-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-colPublished-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Published
                    </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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Name
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Happy minute day!
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                30%
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jan 3, 2019
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                -
              </p>
            </div>
          </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Sales
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Sale
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colName-id"
              scope="col"
            >
              Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colStart-id"
              scope="col"
            >
              Starts
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colEnd-id"
              scope="col"
            >
              Ends
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colValue-id"
              scope="col"
            >
              Value
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
            >
              40%
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
            >
              $30.00
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
            >
              10%
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
            >
              20%
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id SaleList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
            >
              10%
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Sales
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Sale
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colName-id"
              scope="col"
            >
              Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colStart-id"
              scope="col"
            >
              Starts
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colEnd-id"
              scope="col"
            >
              Ends
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colValue-id"
              scope="col"
            >
              Value
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colName-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colStart-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colEnd-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id SaleList-colValue-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Sales
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Sale
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 SaleList-colName-id"
              scope="col"
            >
              Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colStart-id"
              scope="col"
            >
              Starts
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colEnd-id"
              scope="col"
            >
              Ends
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id SaleList-colValue-id"
              scope="col"
            >
              Value
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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>
`;

exports[`Storyshots Views / Discounts / Voucher create default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create Voucher
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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 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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="code"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                          <input
                            checked=""
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="0"
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="applyOncePerOrder"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    Only once per order
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If this option is disabled, discount will be counted for every eligible product
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasUsageLimit"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="applyOncePerCustomer"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasEndDate"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create Voucher
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="code"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                          <input
                            checked=""
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Generic form error
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="0"
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="applyOncePerOrder"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    Only once per order
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If this option is disabled, discount will be counted for every eligible product
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasUsageLimit"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="applyOncePerCustomer"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="startDate"
                      type="date"
                      value=""
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Generic form error
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="startTime"
                      type="time"
                      value=""
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Generic form error
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasEndDate"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          DISCOUNT
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="code"
                    type="text"
                    value="DISCOUNT"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                          <input
                            checked=""
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="25"
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id RadioGroupField-formLabel-id"
                >
                  Discount Specific Information
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="ENTIRE_ORDER"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Entire order
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="SPECIFIC_PRODUCT"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Specific products
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="applyOncePerOrder"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    Only once per order
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If this option is disabled, discount will be counted for every eligible product
                    </span>
                    <div />
                  </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Minimal order value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="minAmountSpent"
                    type="text"
                    value="200"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasUsageLimit"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="applyOncePerCustomer"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="startDate"
                      type="date"
                      value="2018-11-27"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasEndDate"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                DISCOUNT
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Applies to
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Entire order
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                $25.00
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Nov 27, 2018
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                -
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Min. Order Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                $200.00
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Usage Limit
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                -
              </p>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          DISCOUNT
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="code"
                    type="text"
                    value="DISCOUNT"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                          <input
                            checked=""
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Generic form error
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Discount Value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    min="0"
                    name="value"
                    type="number"
                    value="25"
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id RadioGroupField-formLabel-id"
                >
                  Discount Specific Information
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="ENTIRE_ORDER"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Entire order
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="type"
                          type="radio"
                          value="SPECIFIC_PRODUCT"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Specific products
                    </span>
                  </label>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="applyOncePerOrder"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    Only once per order
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If this option is disabled, discount will be counted for every eligible product
                    </span>
                    <div />
                  </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Minimal order value
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="minAmountSpent"
                    type="text"
                    value="200"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasUsageLimit"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="applyOncePerCustomer"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="startDate"
                      type="date"
                      value="2018-11-27"
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Generic form error
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="startTime"
                      type="time"
                      value="00:00"
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                  >
                    Generic form error
                  </p>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasEndDate"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                DISCOUNT
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Applies to
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Entire order
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                $25.00
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Nov 27, 2018
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                -
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Min. Order Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                $200.00
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Usage Limit
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                -
              </p>
            </div>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="code"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
                >
                  <div
                    aria-label="discountType"
                    class="MuiFormGroup-root-id"
                    role="radiogroup"
                  >
                    <label
                      class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                          <input
                            checked=""
                            class="MuiPrivateSwitchBase-input-id"
                            disabled=""
                            name="discountType"
                            type="radio"
                            value="FIXED"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                      >
                        Fixed Amount
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            disabled=""
                            name="discountType"
                            type="radio"
                            value="PERCENTAGE"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                      >
                        Percentage
                      </span>
                    </label>
                    <label
                      class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
                    >
                      <span
                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
                        tabindex="-1"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            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>
                          <input
                            class="MuiPrivateSwitchBase-input-id"
                            disabled=""
                            name="discountType"
                            type="radio"
                            value="SHIPPING"
                          />
                        </span>
                      </span>
                      <span
                        class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                      >
                        Free Shipping
                      </span>
                    </label>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                    disabled=""
                    min="0"
                    name="value"
                    type="number"
                    value="0"
                  />
                  <div
                    class="TextFieldWithChoices-adornment-id"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      USD
                    </span>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MuiFormControl-root-id RadioGroupField-formControl-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id RadioGroupField-formLabel-id"
                >
                  Discount Specific Information
                </label>
                <div
                  aria-label="type"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="ENTIRE_ORDER"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                    >
                      Entire order
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="type"
                          type="radio"
                          value="SPECIFIC_PRODUCT"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                    >
                      Specific products
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        disabled=""
                        name="applyOncePerOrder"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    Only once per order
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id"
                    >
                      If this option is disabled, discount will be counted for every eligible product
                    </span>
                    <div />
                  </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-formControl-id"
              >
                <div
                  aria-label="requirementsPicker"
                  class="MuiFormGroup-root-id"
                  role="radiogroup"
                >
                  <label
                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiRadio-checked-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.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>
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="requirementsPicker"
                          type="radio"
                          value="NONE"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                    >
                      None
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="requirementsPicker"
                          type="radio"
                          value="ORDER"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                    >
                      Minimal order value
                    </span>
                  </label>
                  <label
                    class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id RadioGroupField-radioLabel-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiRadio-root-id MuiRadio-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiRadio-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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>
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="requirementsPicker"
                          type="radio"
                          value="ITEM"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                    >
                      Minimum quantity of items
                    </span>
                  </label>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasUsageLimit"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit number of times this discount can be used in total
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="applyOncePerCustomer"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Limit to one use per customer
                </span>
              </label>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                      disabled=""
                      name="startDate"
                      type="date"
                      value=""
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                      disabled=""
                      name="startTime"
                      type="time"
                      value=""
                    />
                  </div>
                </div>
              </div>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="hasEndDate"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Set end date
                </span>
              </label>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Summary
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Code
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Applies to
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Start Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                End Date
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Min. Order Value
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Usage Limit
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
            </div>
          </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Vouchers
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add voucher
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colName-id"
              scope="col"
            >
              Code
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colMinSpent-id"
              scope="col"
            >
              Min. Spent
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colStart-id"
              scope="col"
            >
              Starts
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colEnd-id"
              scope="col"
            >
              Ends
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colValue-id"
              scope="col"
            >
              Value
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colUses-id"
              scope="col"
            >
              Uses
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id VoucherList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
            >
              100%
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
            >
              -
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id VoucherList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
            >
              $200.00
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
            >
              <time
                class=""
                datetime="2019-01-03"
                title="Jan 3, 2019"
              >
                in 5 months
              </time>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
            >
              -
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
            >
              $25.00
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
            >
              150
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Vouchers
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add voucher
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colName-id"
              scope="col"
            >
              Code
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colMinSpent-id"
              scope="col"
            >
              Min. Spent
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colStart-id"
              scope="col"
            >
              Starts
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colEnd-id"
              scope="col"
            >
              Ends
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colValue-id"
              scope="col"
            >
              Value
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colUses-id"
              scope="col"
            >
              Uses
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colName-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colMinSpent-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colStart-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colEnd-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colValue-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id VoucherList-colUses-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Vouchers
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add voucher
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 VoucherList-colName-id"
              scope="col"
            >
              Code
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colMinSpent-id"
              scope="col"
            >
              Min. Spent
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colStart-id"
              scope="col"
            >
              Starts
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colEnd-id"
              scope="col"
            >
              Ends
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colValue-id"
              scope="col"
            >
              Value
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id VoucherList-colUses-id"
              scope="col"
            >
              Uses
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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="7"
            >
              No vouchers found
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Error page default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="NotFoundPage-root-id"
  >
    <div
      class="NotFoundPage-container-id"
    >
      <div
        class="NotFoundPage-innerContainer-id"
      >
        <div>
          <h4
            class="MuiTypography-root-id MuiTypography-h4-id NotFoundPage-upperHeader-id"
          >
            Ooops!...
          </h4>
          <h3
            class="MuiTypography-root-id MuiTypography-h3-id NotFoundPage-bottomHeader-id"
          >
            Error
          </h3>
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            We've encountered a problem...
          </p>
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Don't worry, everything is gonna be fine
          </p>
        </div>
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id NotFoundPage-button-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Back to home
            </span>
          </button>
        </div>
      </div>
      <div>
        <span
          class="isvg pending NotFoundPage-notFoundImage-id"
        />
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / HomePage default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeOrdersCard-headerContainer-id"
      data-tc="home-header"
    >
      <h4
        class="MuiTypography-root-id MuiTypography-h4-id HomeOrdersCard-pageHeader-id"
      >
        Hello there, admin@example.com
      </h4>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id HomeOrdersCard-subtitle-id"
      >
        Here is some information we gathered about your store
      </p>
    </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <h6
                  class="MuiTypography-root-id MuiTypography-subtitle1-id HomeAnalyticsCard-cardTitle-id"
                >
                  Sales
                </h6>
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
                >
                  Today
                </span>
                <h4
                  class="MuiTypography-root-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id HomeAnalyticsCard-value-id"
                >
                  $57.15
                </h4>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 48 48"
                >
                  <path
                    clip-rule="evenodd"
                    d="M31.4911 6H40.8033V14.5361L37.0667 11.1109L26.5267 21.6509L16.854 19.7163L7.49492 30.9473L6 29.7015L16.1003 17.5811L25.8871 19.5385L35.6308 9.79474L31.4911 6ZM13.0731 35.1892H9.18117V40.0541H13.0731V35.1892ZM7.23522 33.2432V42H15.019V33.2432H7.23522ZM17.9379 25.4595H21.8298V40.0541H17.9379V25.4595ZM15.992 42V23.5135H23.7758V42H15.992ZM30.5866 28.3784H26.6947V40.0541H30.5866V28.3784ZM24.7487 26.4324V42H32.5325V26.4324H24.7487ZM35.4514 19.6216H39.3433V40.0541H35.4514V19.6216ZM33.5055 42V17.6757H41.2893V42H33.5055Z"
                    fill="url(#paint0_linear)"
                    fill-rule="evenodd"
                  />
                  <defs>
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear"
                      x1="6"
                      x2="45.6223"
                      y1="6"
                      y2="46.3533"
                    >
                      <stop
                        stop-color="#06847B"
                      />
                      <stop
                        offset="1"
                        stop-color="#3EE7CD"
                      />
                    </linearGradient>
                  </defs>
                </svg>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <h6
                  class="MuiTypography-root-id MuiTypography-subtitle1-id HomeAnalyticsCard-cardTitle-id"
                >
                  Orders
                </h6>
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
                >
                  Today
                </span>
                <h4
                  class="MuiTypography-root-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id HomeAnalyticsCard-value-id"
                >
                  1
                </h4>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 48 48"
                >
                  <path
                    clip-rule="evenodd"
                    d="M34.5789 6H9V42H34.5789V36.7895H32.6842V40.1053H10.8947V7.89474H32.6842V25.4211H34.5789V6ZM31.7369 35.2872L39.5121 27.5121L38.1723 26.1723L31.7369 32.6077L28.6173 29.4881L27.2775 30.8279L31.7369 35.2872ZM14.6842 11.6842H17.5263V14.5263H14.6842V11.6842ZM27.9474 11.6842H19.4211V14.5263H27.9474V11.6842ZM14.6842 17.3684H17.5263V20.2105H14.6842V17.3684ZM27.9474 17.3684H19.4211V20.2105H27.9474V17.3684ZM14.6842 23.0526H17.5263V25.8947H14.6842V23.0526ZM27.9474 23.0526H19.4211V25.8947H27.9474V23.0526Z"
                    fill="url(#paint0_linear)"
                    fill-rule="evenodd"
                  />
                  <defs>
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear"
                      x1="9"
                      x2="48.3106"
                      y1="6"
                      y2="40.6161"
                    >
                      <stop
                        stop-color="#06847B"
                      />
                      <stop
                        offset="1"
                        stop-color="#3EE7CD"
                      />
                    </linearGradient>
                  </defs>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    <strong>
                      1
                    </strong>
                     Orders are ready to fulfill
                  </p>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0V0z"
                      fill="none"
                    />
                  </svg>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    No payments waiting for capture
                  </p>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0V0z"
                      fill="none"
                    />
                  </svg>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    No products out of stock
                  </p>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0V0z"
                      fill="none"
                    />
                  </svg>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Top products
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <table
            class="MuiTable-root-id"
          >
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id HomeProductList-tableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id HomeProductList-avatarSpacing-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id HomeProductList-avatarProps-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    />
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeProductList-label-id"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
                  >
                    Gardner-Martin
                  </p>
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    XS
                  </p>
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                  >
                    One ordered
                  </p>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-alignRight-id"
                  >
                    $37.65
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1536941427137"
                    title="Sep 14, 2018 12:10 PM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1538573326325"
                    title="Oct 3, 2018 9:28 AM"
                  >
                    in 2 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was fully paid
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1538573341837"
                    title="Oct 3, 2018 9:29 AM"
                  >
                    in 2 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1538614911243"
                    title="Oct 3, 2018 9:01 PM"
                  >
                    in 2 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1538681778831"
                    title="Oct 4, 2018 3:36 PM"
                  >
                    in 2 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1538681881420"
                    title="Oct 4, 2018 3:38 PM"
                  >
                    in 2 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1538742657268"
                    title="Oct 5, 2018 8:30 AM"
                  >
                    in 2 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1538992242622"
                    title="Oct 8, 2018 5:50 AM"
                  >
                    in 2 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed from draft by admin@example.com
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1539359471665"
                    title="Oct 12, 2018 11:51 AM"
                  >
                    in 2 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1540466758843"
                    title="Oct 25, 2018 7:25 AM"
                  >
                    in 3 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was placed
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1540546497580"
                    title="Oct 26, 2018 5:34 AM"
                  >
                    in 3 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was fully paid
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1540546682440"
                    title="Oct 26, 2018 5:38 AM"
                  >
                    in 3 months
                  </time>
                </p>
              </div>
            </li>
            <li
              class="MuiListItem-root-id MuiListItem-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Order #15 was fully paid
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id MuiListItemText-secondary-id MuiListItemText-textDense-id"
                >
                  <time
                    class=""
                    datetime="1540546682467"
                    title="Oct 26, 2018 5:38 AM"
                  >
                    in 3 months
                  </time>
                </p>
              </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="HomeOrdersCard-headerContainer-id"
      data-tc="home-header"
    >
      <h4
        class="MuiTypography-root-id MuiTypography-h4-id HomeOrdersCard-pageHeader-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </h4>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id HomeOrdersCard-subtitle-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </p>
    </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <h6
                  class="MuiTypography-root-id MuiTypography-subtitle1-id HomeAnalyticsCard-cardTitle-id"
                >
                  Sales
                </h6>
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
                >
                  Today
                </span>
                <h4
                  class="MuiTypography-root-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id HomeAnalyticsCard-value-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    style="width:5em"
                  >
                    ‌
                  </span>
                </h4>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 48 48"
                >
                  <path
                    clip-rule="evenodd"
                    d="M31.4911 6H40.8033V14.5361L37.0667 11.1109L26.5267 21.6509L16.854 19.7163L7.49492 30.9473L6 29.7015L16.1003 17.5811L25.8871 19.5385L35.6308 9.79474L31.4911 6ZM13.0731 35.1892H9.18117V40.0541H13.0731V35.1892ZM7.23522 33.2432V42H15.019V33.2432H7.23522ZM17.9379 25.4595H21.8298V40.0541H17.9379V25.4595ZM15.992 42V23.5135H23.7758V42H15.992ZM30.5866 28.3784H26.6947V40.0541H30.5866V28.3784ZM24.7487 26.4324V42H32.5325V26.4324H24.7487ZM35.4514 19.6216H39.3433V40.0541H35.4514V19.6216ZM33.5055 42V17.6757H41.2893V42H33.5055Z"
                    fill="url(#paint0_linear)"
                    fill-rule="evenodd"
                  />
                  <defs>
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear"
                      x1="6"
                      x2="45.6223"
                      y1="6"
                      y2="46.3533"
                    >
                      <stop
                        stop-color="#06847B"
                      />
                      <stop
                        offset="1"
                        stop-color="#3EE7CD"
                      />
                    </linearGradient>
                  </defs>
                </svg>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <h6
                  class="MuiTypography-root-id MuiTypography-subtitle1-id HomeAnalyticsCard-cardTitle-id"
                >
                  Orders
                </h6>
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
                >
                  Today
                </span>
                <h4
                  class="MuiTypography-root-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id HomeAnalyticsCard-value-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                    style="width:5em"
                  >
                    ‌
                  </span>
                </h4>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 48 48"
                >
                  <path
                    clip-rule="evenodd"
                    d="M34.5789 6H9V42H34.5789V36.7895H32.6842V40.1053H10.8947V7.89474H32.6842V25.4211H34.5789V6ZM31.7369 35.2872L39.5121 27.5121L38.1723 26.1723L31.7369 32.6077L28.6173 29.4881L27.2775 30.8279L31.7369 35.2872ZM14.6842 11.6842H17.5263V14.5263H14.6842V11.6842ZM27.9474 11.6842H19.4211V14.5263H27.9474V11.6842ZM14.6842 17.3684H17.5263V20.2105H14.6842V17.3684ZM27.9474 17.3684H19.4211V20.2105H27.9474V17.3684ZM14.6842 23.0526H17.5263V25.8947H14.6842V23.0526ZM27.9474 23.0526H19.4211V25.8947H27.9474V23.0526Z"
                    fill="url(#paint0_linear)"
                    fill-rule="evenodd"
                  />
                  <defs>
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear"
                      x1="9"
                      x2="48.3106"
                      y1="6"
                      y2="40.6161"
                    >
                      <stop
                        stop-color="#06847B"
                      />
                      <stop
                        offset="1"
                        stop-color="#3EE7CD"
                      />
                    </linearGradient>
                  </defs>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0V0z"
                      fill="none"
                    />
                  </svg>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0V0z"
                      fill="none"
                    />
                  </svg>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0V0z"
                      fill="none"
                    />
                  </svg>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Top products
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 HomeProductList-avatarSpacing-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id HomeProductList-avatarProps-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                        focusable="false"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    />
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeProductList-label-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-alignRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-default-id MuiListItem-dense-id MuiListItem-gutters-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id HomeActivityCard-loadingProducts-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </p>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / HomePage no data 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="HomeOrdersCard-headerContainer-id"
      data-tc="home-header"
    >
      <h4
        class="MuiTypography-root-id MuiTypography-h4-id HomeOrdersCard-pageHeader-id"
      >
        Hello there, admin@example.com
      </h4>
      <p
        class="MuiTypography-root-id MuiTypography-body2-id HomeOrdersCard-subtitle-id"
      >
        Here is some information we gathered about your store
      </p>
    </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <h6
                  class="MuiTypography-root-id MuiTypography-subtitle1-id HomeAnalyticsCard-cardTitle-id"
                >
                  Sales
                </h6>
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
                >
                  Today
                </span>
                <h4
                  class="MuiTypography-root-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id HomeAnalyticsCard-value-id"
                >
                  $57.15
                </h4>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 48 48"
                >
                  <path
                    clip-rule="evenodd"
                    d="M31.4911 6H40.8033V14.5361L37.0667 11.1109L26.5267 21.6509L16.854 19.7163L7.49492 30.9473L6 29.7015L16.1003 17.5811L25.8871 19.5385L35.6308 9.79474L31.4911 6ZM13.0731 35.1892H9.18117V40.0541H13.0731V35.1892ZM7.23522 33.2432V42H15.019V33.2432H7.23522ZM17.9379 25.4595H21.8298V40.0541H17.9379V25.4595ZM15.992 42V23.5135H23.7758V42H15.992ZM30.5866 28.3784H26.6947V40.0541H30.5866V28.3784ZM24.7487 26.4324V42H32.5325V26.4324H24.7487ZM35.4514 19.6216H39.3433V40.0541H35.4514V19.6216ZM33.5055 42V17.6757H41.2893V42H33.5055Z"
                    fill="url(#paint0_linear)"
                    fill-rule="evenodd"
                  />
                  <defs>
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear"
                      x1="6"
                      x2="45.6223"
                      y1="6"
                      y2="46.3533"
                    >
                      <stop
                        stop-color="#06847B"
                      />
                      <stop
                        offset="1"
                        stop-color="#3EE7CD"
                      />
                    </linearGradient>
                  </defs>
                </svg>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id HomeAnalyticsCard-cardSpacing-id"
          >
            <div
              class="MuiCardContent-root-id HomeAnalyticsCard-cardContent-id"
            >
              <div>
                <h6
                  class="MuiTypography-root-id MuiTypography-subtitle1-id HomeAnalyticsCard-cardTitle-id"
                >
                  Orders
                </h6>
                <span
                  class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorTextSecondary-id HomeAnalyticsCard-cardSubtitle-id"
                >
                  Today
                </span>
                <h4
                  class="MuiTypography-root-id MuiTypography-h4-id MuiTypography-colorTextPrimary-id HomeAnalyticsCard-value-id"
                >
                  1
                </h4>
              </div>
              <div
                class="HomeAnalyticsCard-iconBackground-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeInherit-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 48 48"
                >
                  <path
                    clip-rule="evenodd"
                    d="M34.5789 6H9V42H34.5789V36.7895H32.6842V40.1053H10.8947V7.89474H32.6842V25.4211H34.5789V6ZM31.7369 35.2872L39.5121 27.5121L38.1723 26.1723L31.7369 32.6077L28.6173 29.4881L27.2775 30.8279L31.7369 35.2872ZM14.6842 11.6842H17.5263V14.5263H14.6842V11.6842ZM27.9474 11.6842H19.4211V14.5263H27.9474V11.6842ZM14.6842 17.3684H17.5263V20.2105H14.6842V17.3684ZM27.9474 17.3684H19.4211V20.2105H27.9474V17.3684ZM14.6842 23.0526H17.5263V25.8947H14.6842V23.0526ZM27.9474 23.0526H19.4211V25.8947H27.9474V23.0526Z"
                    fill="url(#paint0_linear)"
                    fill-rule="evenodd"
                  />
                  <defs>
                    <linearGradient
                      gradientUnits="userSpaceOnUse"
                      id="paint0_linear"
                      x1="9"
                      x2="48.3106"
                      y1="6"
                      y2="40.6161"
                    >
                      <stop
                        stop-color="#06847B"
                      />
                      <stop
                        offset="1"
                        stop-color="#3EE7CD"
                      />
                    </linearGradient>
                  </defs>
                </svg>
              </div>
            </div>
          </div>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    <strong>
                      1
                    </strong>
                     Orders are ready to fulfill
                  </p>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0V0z"
                      fill="none"
                    />
                  </svg>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    No payments waiting for capture
                  </p>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0V0z"
                      fill="none"
                    />
                  </svg>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    No products out of stock
                  </p>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeNotificationTable-arrowIcon-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0V0z"
                      fill="none"
                    />
                  </svg>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Top products
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <table
            class="MuiTable-root-id"
          >
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id HomeProductList-noProducts-id"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    No products found
                  </p>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-default-id MuiListItem-dense-id MuiListItem-gutters-id HomeActivityCard-noProducts-id"
            >
              <div
                class="MuiListItemText-root-id MuiListItemText-dense-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  No activities found
                </p>
              </div>
            </li>
          </ul>
        </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>
          <h5
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </h5>
          <p
            class="MuiTypography-root-id MuiTypography-body2-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
          </p>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Menu Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="navbar"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-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="Node-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id Node-row-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id Node-dragIcon-id"
                            focusable="false"
                            role="presentation"
                            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>
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id Node-nodeTitle-id"
                        >
                          Accessories
                        </p>
                        <div
                          class="Node-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
                              role="presentation"
                              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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id Node-deleteButton-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              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"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </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="Node-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id Node-row-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id Node-dragIcon-id"
                            focusable="false"
                            role="presentation"
                            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>
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id Node-nodeTitle-id"
                        >
                          Jewelry
                        </p>
                        <div
                          class="Node-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
                              role="presentation"
                              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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id Node-deleteButton-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              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"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </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="Node-rowContainer-id"
                      style="margin-left:40px"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id Node-row-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id Node-dragIcon-id"
                            focusable="false"
                            role="presentation"
                            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>
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id Node-nodeTitle-id"
                        >
                          Glasses
                        </p>
                        <div
                          class="Node-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
                              role="presentation"
                              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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id Node-deleteButton-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              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"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </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="Node-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id Node-row-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id Node-dragIcon-id"
                            focusable="false"
                            role="presentation"
                            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>
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id Node-nodeTitle-id"
                        >
                          Groceries
                        </p>
                        <div
                          class="Node-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
                              role="presentation"
                              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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id Node-deleteButton-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              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"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </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="Node-rowContainer-id"
                      style="margin-left:0"
                    >
                      <div
                        class="MuiPaper-root-id MuiPaper-elevation0-id MuiPaper-rounded-id Node-row-id"
                      >
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id Node-dragIcon-id"
                            focusable="false"
                            role="presentation"
                            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>
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id Node-nodeTitle-id"
                        >
                          Apparel
                        </p>
                        <div
                          class="Node-spacer-id"
                        />
                        <button
                          class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-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"
                              role="presentation"
                              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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id Node-deleteButton-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id"
                              focusable="false"
                              role="presentation"
                              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"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add 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>
          <h5
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </h5>
          <p
            class="MuiTypography-root-id MuiTypography-body2-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
          </p>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-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"
              >
                ‌
              </span>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add 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>
          <h5
            class="MuiTypography-root-id MuiTypography-h5-id"
          >
            Navigation
          </h5>
          <p
            class="MuiTypography-root-id MuiTypography-body2-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
          </p>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Menu Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="navbar"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Menu Items
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-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 MuiPaper-elevation0-id MuiPaper-rounded-id Placeholder-row-id"
                  >
                    <p
                      class="MuiTypography-root-id MuiTypography-body2-id"
                    >
                      Add new menu item to begin creating menu
                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div
              class="MuiCardActions-root-id MenuItems-actions-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add 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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Navigation
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Menu
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colTitle-id"
              scope="col"
            >
              Menu Title
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colItems-id"
              scope="col"
            >
              Items
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id MenuList-row-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
            >
              <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"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0z"
                      fill="none"
                    />
                  </svg>
                </span>
              </button>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id MenuList-row-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </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"
            >
              <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"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0z"
                      fill="none"
                    />
                  </svg>
                </span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Navigation
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Menu
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colTitle-id"
              scope="col"
            >
              Menu Title
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colItems-id"
              scope="col"
            >
              Items
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colTitle-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MenuList-colItems-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiIconButton-label-id"
                >
                  <svg
                    aria-hidden="true"
                    class="MuiSvgIcon-root-id"
                    focusable="false"
                    role="presentation"
                    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"
                    />
                    <path
                      d="M0 0h24v24H0z"
                      fill="none"
                    />
                  </svg>
                </span>
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Navigation
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Menu
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 MenuList-colTitle-id"
              scope="col"
            >
              Menu Title
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MenuList-colItems-id"
              scope="col"
            >
              Items
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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 menus found
            </td>
          </tr>
        </tbody>
      </table>
    </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>
          <h3
            class="MuiTypography-root-id MuiTypography-h3-id NotFoundPage-header-id"
          >
            Ooops!...
          </h3>
          <h4
            class="MuiTypography-root-id MuiTypography-h4-id NotFoundPage-header-id"
          >
            Something's missing
          </h4>
          <p
            class="MuiTypography-root-id MuiTypography-body2-id"
          >
            Sorry, the page was not found
          </p>
        </div>
        <div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id NotFoundPage-button-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Go back to dashboard
            </span>
          </button>
        </div>
      </div>
      <div>
        <span
          class="isvg pending NotFoundPage-notFoundImage-id"
        />
      </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Draft Orders
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
              scope="col"
            >
              No. of Order
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colDate-id"
              scope="col"
            >
              Date
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
              scope="col"
            >
              Customer
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
              scope="col"
            >
              Total
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #20
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Laura Stone 1 2
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $305.17
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #19
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Elizabeth Vaughn
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $1,215.89
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #18
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              david.lawson@example.com
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $321.71
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #17
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Aaron Randall
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $271.95
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #16
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Laura Jensen
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $335.84
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #15
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Jenna Villa
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $1,042.15
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #14
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Wesley Davis
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $213.69
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #13
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Anthony Gonzalez
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $367.03
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #12
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Denise Freeman
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $298.76
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #11
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              James Ball
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $663.69
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #10
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Michael Martinez
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $280.41
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #9
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Melissa Simon
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $234.93
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #8
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Justin Mccoy
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $485.19
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #7
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Anthony Gonzalez
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $223.54
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #6
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Bradley Ford
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $237.55
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #5
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              David Lawson
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $453.55
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #4
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Lauren Watson
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $812.67
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #3
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Mark Lee
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $481.41
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #2
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Kara Murphy
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $569.19
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderDraftList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              #1
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              Curtis Bailey
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              $557.00
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Draft Orders
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
              scope="col"
            >
              No. of Order
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colDate-id"
              scope="col"
            >
              Date
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
              scope="col"
            >
              Customer
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
              scope="col"
            >
              Total
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colNumber-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colDate-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Draft Orders
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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-paddingDense-id OrderDraftList-colNumber-id"
              scope="col"
            >
              No. of Order
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colDate-id"
              scope="col"
            >
              Date
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colCustomer-id"
              scope="col"
            >
              Customer
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderDraftList-colTotal-id"
              scope="col"
            >
              Total
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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>
`;

exports[`Storyshots Views / Orders / Order details cancelled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="OrderDetailsPage-date-id"
    >
      <span
        class="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details fulfilled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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"
        style="width:10em"
      >
        ‌
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-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 OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                        focusable="false"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </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"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </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"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <span
            class="Skeleton-skeleton-id"
          >
            ‌
          </span>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              ‌
            </span>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </span>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </span>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </span>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              ‌
            </span>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details no customer note 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
            >
              No notes from customer
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details no payment 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details no shipping address 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Not set
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details partially fulfilled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details payment confirmed 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details payment error 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details pending payment 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details refunded payment 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully refunded
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details rejected payment 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order details unfulfilled 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id OrderDetailsPage-header-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #9
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1536658648185"
          title="Sep 11, 2018 5:37 AM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled (3)
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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 OrderUnfulfilledItems-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderUnfulfilledItems-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderUnfulfilledItems-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderUnfulfilledItems-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderUnfulfilledItems-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Watkins-Gonzalez (Soft)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colQuantity-id"
                >
                  3
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colPrice-id"
                >
                  $18.51
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderUnfulfilledItems-colTotal-id"
                >
                  $55.53
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-2
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled (1)
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id OrderFulfillment-orderNumber-id"
                >
                  #9-1
                </p>
              </div>
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <div>
                <button
                  aria-haspopup="true"
                  aria-label="More"
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                      <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"
          />
          <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 OrderFulfillment-colName-id"
                  scope="col"
                >
                  <span
                    class="OrderFulfillment-colNameLabel-id"
                  >
                    Product
                  </span>
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colQuantity-id"
                  scope="col"
                >
                  Quantity
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colPrice-id"
                  scope="col"
                >
                  Price
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id OrderFulfillment-colTotal-id"
                  scope="col"
                >
                  Total
                </th>
              </tr>
            </thead>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id OrderFulfillment-clickableRow-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderFulfillment-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      Williams, Garcia and Walker (XS)
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colQuantity-id"
                >
                  1
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colPrice-id"
                >
                  $79.71
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderFulfillment-colTotal-id"
                >
                  $79.71
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </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"
                  >
                    $214.95
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes
                  </td>
                  <td>
                    does not apply
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr>
                  <td>
                    Shipping
                  </td>
                  <td>
                    Registred priority
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $19.98
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Total
                  </td>
                  <td />
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderPayment-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Preauthorized amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $234.93
                  </td>
                </tr>
                <tr>
                  <td>
                    Captured amount
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    $0.00
                  </td>
                </tr>
                <tr
                  class="OrderPayment-totalRow-id"
                >
                  <td>
                    Outstanding Balance
                  </td>
                  <td
                    class="OrderPayment-textRight-id"
                  >
                    -$234.93
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardActions-root-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-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 MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Mark as paid
              </span>
            </button>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
            <div
              class="Component-root-id"
            >
              <span
                class="Component-dot-id"
              />
              <div
                class="Component-noExpander-id"
              >
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id"
                >
                  Fulfilled 1 items
                </p>
                <p
                  class="MuiTypography-root-id MuiTypography-body2-id Component-date-id"
                >
                  <time
                    class=""
                    datetime="1537190544376"
                    title="Sep 17, 2018 9:22 AM"
                  >
                    in a month
                  </time>
                </p>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <a
              class="ExternalLink-link-id"
              href="mailto:melissa.simon@example.com"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorPrimary-id"
              >
                melissa.simon@example.com
              </p>
            </a>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Melissa Simon
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              487 Roberto Shores
              <br />
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              66272 West Patriciastad
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Wyspy Salomona
            </p>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Same as shipping address
            </p>
          </div>
        </div>
        <div
          class="CardSpacer-spacer-id"
        />
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Notes
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Lorem ipsum dolor sit amet
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #24
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1537485819811"
          title="Sep 20, 2018 7:23 PM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                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"
          />
          <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"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id"
                      >
                        Davis Group (Hard)
                      </p>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        58-1338
                      </span>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                >
                  <form>
                    <div
                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id OrderDraftDetailsProducts-quantityField-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                          name="quantity"
                          type="number"
                          value="2"
                        />
                      </div>
                    </div>
                  </form>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                >
                  $65.95
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                >
                  $131.90
                </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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                    >
                      <img
                        class="MuiAvatar-img-id"
                        src="placeholder60x60.png"
                      />
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id"
                      >
                        Anderson PLC (15-1337)
                      </p>
                      <span
                        class="MuiTypography-root-id MuiTypography-caption-id"
                      >
                        15-1337
                      </span>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                >
                  <form>
                    <div
                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id OrderDraftDetailsProducts-quantityField-id"
                    >
                      <div
                        class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                          name="quantity"
                          type="number"
                          value="2"
                        />
                      </div>
                    </div>
                  </form>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                >
                  $68.20
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                >
                  $136.40
                </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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderDraftDetailsSummary-root-id"
            >
              <tbody>
                <tr>
                  <td>
                    Subtotal
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    $168.30
                  </td>
                </tr>
                <tr>
                  <td>
                    No applicable shipping carriers
                  </td>
                </tr>
                <tr>
                  <td>
                    Taxes (VAT included)
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    $68.30
                  </td>
                </tr>
                <tr>
                  <td>
                    Total
                  </td>
                  <td
                    class="OrderDraftDetailsSummary-textRight-id"
                  >
                    $168.30
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                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"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Not set
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Not set
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Not set
            </p>
          </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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"
        style="width:10em"
      >
        ‌
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                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"
          />
          <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 TableCellAvatar-root-id OrderDraftDetailsProducts-colName-id"
                >
                  <div
                    class="TableCellAvatar-content-id"
                  >
                    <div
                      class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                        focusable="false"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </div>
                    <div
                      class="TableCellAvatar-children-id"
                    >
                      <span
                        class="Skeleton-skeleton-id"
                      >
                        ‌
                      </span>
                    </div>
                  </div>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colQuantity-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colPrice-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id OrderDraftDetailsProducts-colTotal-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
          <div
            class="MuiCardContent-root-id"
          >
            <table
              class="OrderDraftDetailsSummary-root-id"
            >
              <tbody>
                <tr>
                  <td
                    colspan="2"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr>
                  <td
                    colspan="2"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr>
                  <td
                    colspan="2"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr>
                  <td
                    colspan="2"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div
          class="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <span
            class="Skeleton-skeleton-id"
          >
            ‌
          </span>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                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"
            >
              ‌
            </span>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </span>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </span>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <span
              class="Skeleton-skeleton-id"
            >
              ‌
            </span>
          </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        #24
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div>
            <button
              aria-haspopup="true"
              aria-label="More"
              class="MuiButtonBase-root-id MuiIconButton-root-id MuiIconButton-colorPrimary-id CardMenu-iconButton-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiIconButton-label-id"
              >
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                  <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="MuiTypography-root-id MuiTypography-caption-id"
      >
        <time
          class=""
          datetime="1537485819811"
          title="Sep 20, 2018 7:23 PM"
        >
          in a month
        </time>
      </span>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Order Details
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                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"
          />
          <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="OrderHistory-root-id"
        >
          <p
            class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id OrderHistory-header-id"
          >
            Order History
          </p>
          <hr
            class="Hr-root-id"
          />
          <div
            class="Timeline-root-id"
          >
            <form>
              <div
                class="TimelineAddNote-noteRoot-id"
              >
                <div
                  class="MuiCardContent-root-id TimelineAddNote-noteTitle-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TimelineAddNote-avatar-id"
                    style="background:#673ab7"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id TimelineAddNote-input-id"
                  >
                    <div
                      class="MuiInputBase-root-id MuiInput-root-id MuiInput-underline-id MuiInputBase-fullWidth-id MuiInput-fullWidth-id MuiInputBase-formControl-id MuiInput-formControl-id MuiInputBase-multiline-id MuiInput-multiline-id MuiInputBase-adornedEnd-id"
                    >
                      <div
                        class="MuiPrivateTextarea-root-id"
                      >
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-hidden="true"
                          class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                          readonly=""
                          rows="1"
                          tabindex="-1"
                        />
                        <textarea
                          aria-invalid="false"
                          class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiInput-input-id MuiInputBase-inputMultiline-id MuiInput-inputMultiline-id MuiInputBase-inputAdornedEnd-id"
                          name="message"
                          placeholder="Leave your note here..."
                          rows="1"
                          style="height:19px"
                        />
                      </div>
                      <button
                        class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiButton-label-id"
                        >
                          Send
                        </span>
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </form>
          </div>
        </div>
      </div>
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Customer
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                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"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Anonymous user
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Contact information
              </p>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Not set
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Shipping Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Not set
            </p>
          </div>
          <hr
            class="Hr-root-id"
          />
          <div
            class="MuiCardContent-root-id"
          >
            <div
              class="OrderCustomer-sectionHeader-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id OrderCustomer-sectionHeaderTitle-id"
              >
                Billing Address
              </p>
              <div
                class="OrderCustomer-sectionHeaderToolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit
                  </span>
                </button>
              </div>
            </div>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Not set
            </p>
          </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Orders
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-flexContainer-id"
        >
          <div
            class="MuiTabs-scroller-id MuiTabs-fixed-id"
            role="tablist"
            style="margin-bottom:0"
          >
            <div
              class="MuiTabs-flexContainer-id"
            >
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
                    >
                      All Orders
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Tab X
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FilterChips-actionContainer-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Filter-addFilterText-id"
            >
              Add Filter
            </p>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id Filter-addFilterIcon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
              <path
                d="M0 0h24v24H0z"
                fill="none"
              />
            </svg>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
      <hr
        class="Hr-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
              scope="col"
            >
              No. of Order
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colDate-id"
              scope="col"
            >
              Date
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colCustomer-id"
              scope="col"
            >
              Customer
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
              scope="col"
            >
              Payment
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
              scope="col"
            >
              Fulfillment status
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
              scope="col"
            >
              Total
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #20
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Laura Stone 1 2
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $305.17
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #19
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Elizabeth Vaughn
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $1,215.89
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #18
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              david.lawson@example.com
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Draft
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $321.71
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #17
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Aaron Randall
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $271.95
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #16
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Laura Jensen
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $335.84
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #15
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Jenna Villa
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $1,042.15
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #14
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Wesley Davis
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $213.69
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #13
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Anthony Gonzalez
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $367.03
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #12
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Denise Freeman
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $298.76
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #11
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              James Ball
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $663.69
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #10
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Michael Martinez
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $280.41
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #9
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Melissa Simon
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $234.93
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #8
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Justin Mccoy
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $485.19
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #7
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Anthony Gonzalez
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $223.54
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #6
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Bradley Ford
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $237.55
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #5
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              David Lawson
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $453.55
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #4
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Lauren Watson
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $812.67
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #3
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Mark Lee
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $481.41
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #2
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Kara Murphy
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $569.19
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #1
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Curtis Bailey
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $557.00
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Orders
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-flexContainer-id"
        >
          <div
            class="MuiTabs-scroller-id MuiTabs-fixed-id"
            role="tablist"
            style="margin-bottom:0"
          >
            <div
              class="MuiTabs-flexContainer-id"
            >
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      All Orders
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Tab X
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FilterChips-actionContainer-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Filter-addFilterText-id"
            >
              Add Filter
            </p>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id Filter-addFilterIcon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
              <path
                d="M0 0h24v24H0z"
                fill="none"
              />
            </svg>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
      <hr
        class="Hr-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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
              scope="col"
            >
              No. of Order
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colDate-id"
              scope="col"
            >
              Date
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colCustomer-id"
              scope="col"
            >
              Customer
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
              scope="col"
            >
              Payment
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
              scope="col"
            >
              Fulfillment status
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
              scope="col"
            >
              Total
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colDate-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Orders
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-flexContainer-id"
        >
          <div
            class="MuiTabs-scroller-id MuiTabs-fixed-id"
            role="tablist"
            style="margin-bottom:0"
          >
            <div
              class="MuiTabs-flexContainer-id"
            >
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
                    >
                      All Orders
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Tab X
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FilterChips-actionContainer-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Filter-addFilterText-id"
            >
              Add Filter
            </p>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id Filter-addFilterIcon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
              <path
                d="M0 0h24v24H0z"
                fill="none"
              />
            </svg>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
      <hr
        class="Hr-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-paddingDense-id OrderList-colNumber-id"
              scope="col"
            >
              No. of Order
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colDate-id"
              scope="col"
            >
              Date
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colCustomer-id"
              scope="col"
            >
              Customer
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
              scope="col"
            >
              Payment
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
              scope="col"
            >
              Fulfillment status
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
              scope="col"
            >
              Total
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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="7"
            >
              No orders found
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

exports[`Storyshots Views / Orders / Order list with custom filters 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Orders
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Create order
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-flexContainer-id"
        >
          <div
            class="MuiTabs-scroller-id MuiTabs-fixed-id"
            role="tablist"
            style="margin-bottom:0"
          >
            <div
              class="MuiTabs-flexContainer-id"
            >
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
                    >
                      All Orders
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Tab X
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FilterChips-actionContainer-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Filter-addFilterText-id"
            >
              Add Filter
            </p>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id Filter-addFilterIcon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
              <path
                d="M0 0h24v24H0z"
                fill="none"
              />
            </svg>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
              placeholder="Search Orders..."
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
      <div
        class="FilterChips-filterContainer-id"
      >
        <div
          class="FilterChips-filterChipContainer-id"
        >
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 0
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 1
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 2
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 3
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 4
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 5
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 6
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 7
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 8
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 9
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 10
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 11
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 12
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 13
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 14
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
        </div>
        <a
          class="MuiTypography-root-id MuiTypography-body2-id Link-root-id Link-primary-id"
        >
          Delete Search
        </a>
      </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 MuiTableCell-paddingCheckbox-id"
              scope="col"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
              scope="col"
            >
              No. of Order
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colDate-id"
              scope="col"
            >
              Date
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colCustomer-id"
              scope="col"
            >
              Customer
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
              scope="col"
            >
              Payment
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
              scope="col"
            >
              Fulfillment status
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
              scope="col"
            >
              Total
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #20
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Laura Stone 1 2
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $305.17
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #19
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Elizabeth Vaughn
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $1,215.89
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #18
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              david.lawson@example.com
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Draft
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $321.71
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #17
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Aaron Randall
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $271.95
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #16
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Laura Jensen
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $335.84
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #15
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Jenna Villa
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $1,042.15
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #14
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Wesley Davis
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $213.69
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #13
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Anthony Gonzalez
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $367.03
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #12
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Denise Freeman
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $298.76
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #11
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              James Ball
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unfulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $663.69
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #10
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Michael Martinez
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Cancelled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $280.41
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #9
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Melissa Simon
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $234.93
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #8
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Justin Mccoy
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $485.19
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #7
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Anthony Gonzalez
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $223.54
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #6
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Bradley Ford
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $237.55
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #5
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              David Lawson
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $453.55
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #4
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Lauren Watson
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $812.67
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #3
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Mark Lee
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Unpaid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $481.41
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #2
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Kara Murphy
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $569.19
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id OrderList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colNumber-id"
            >
              #1
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-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 MuiTableCell-paddingDense-id OrderList-colCustomer-id"
            >
              Curtis Bailey
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colPayment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Fully paid
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colFulfillment-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-neutralDot-id"
              >
                Partially fulfilled
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingDense-id OrderList-colTotal-id"
            >
              $557.00
            </td>
          </tr>
        </tbody>
      </table>
    </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          About
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id PageInfo-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Title
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="title"
                    type="text"
                    value="About"
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Content
                  </span>
                  <div
                    class="Draftail-Editor Draftail-Editor--hide-placeholder"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="rosn-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="rosn-0-0"
                              >
                                <span
                                  data-offset-key="rosn-0-0"
                                  style="font-weight:bold"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    bold
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="6tbch-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="6tbch-0-0"
                              >
                                <span
                                  data-offset-key="6tbch-0-0"
                                  style="font-style:italic"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    italic
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="1p044-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="1p044-0-0"
                              >
                                <span
                                  data-offset-key="1p044-0-0"
                                  style="text-decoration:line-through"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    strikethrough
                                  </span>
                                </span>
                              </div>
                            </div>
                            <h1
                              class="Draftail-block--header-one "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="aven6-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="aven6-0-0"
                              >
                                <span
                                  data-offset-key="aven6-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h1
                                  </span>
                                </span>
                              </div>
                            </h1>
                            <h2
                              class="Draftail-block--header-two "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="9rabl-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="9rabl-0-0"
                              >
                                <span
                                  data-offset-key="9rabl-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h2
                                  </span>
                                </span>
                              </div>
                            </h2>
                            <h3
                              class="Draftail-block--header-three "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="bv0ac-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="bv0ac-0-0"
                              >
                                <span
                                  data-offset-key="bv0ac-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h3
                                  </span>
                                </span>
                              </div>
                            </h3>
                            <blockquote
                              class="Draftail-block--blockquote "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="2ip7q-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="2ip7q-0-0"
                              >
                                <span
                                  data-offset-key="2ip7q-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    blockquote
                                  </span>
                                </span>
                              </div>
                            </blockquote>
                            <ul
                              class="public-DraftStyleDefault-ul"
                              data-offset-key="8r8ss-0-0"
                            >
                              <li
                                class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="8r8ss-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="8r8ss-0-0"
                                >
                                  <span
                                    data-offset-key="8r8ss-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ul
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ul>
                            <ol
                              class="public-DraftStyleDefault-ol"
                              data-offset-key="911hc-0-0"
                            >
                              <li
                                class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="911hc-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="911hc-0-0"
                                >
                                  <span
                                    data-offset-key="911hc-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ol
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ol>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="5aejo-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="5aejo-0-0"
                              >
                                <span
                                  data-offset-key="5aejo-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    link
                                  </span>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this page easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                URL
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Slug
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="About"
                    type="text"
                    value="about"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  If empty, URL will be autogenerated from Page Name
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id"
                        />
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Hidden
                      <div />
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="publicationDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          About
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id PageInfo-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="title"
                    type="text"
                    value="About"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Content
                  </span>
                  <div
                    class="Draftail-Editor Draftail-Editor--hide-placeholder"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="rosn-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="rosn-0-0"
                              >
                                <span
                                  data-offset-key="rosn-0-0"
                                  style="font-weight:bold"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    bold
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="6tbch-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="6tbch-0-0"
                              >
                                <span
                                  data-offset-key="6tbch-0-0"
                                  style="font-style:italic"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    italic
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="1p044-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="1p044-0-0"
                              >
                                <span
                                  data-offset-key="1p044-0-0"
                                  style="text-decoration:line-through"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    strikethrough
                                  </span>
                                </span>
                              </div>
                            </div>
                            <h1
                              class="Draftail-block--header-one "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="aven6-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="aven6-0-0"
                              >
                                <span
                                  data-offset-key="aven6-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h1
                                  </span>
                                </span>
                              </div>
                            </h1>
                            <h2
                              class="Draftail-block--header-two "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="9rabl-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="9rabl-0-0"
                              >
                                <span
                                  data-offset-key="9rabl-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h2
                                  </span>
                                </span>
                              </div>
                            </h2>
                            <h3
                              class="Draftail-block--header-three "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="bv0ac-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="bv0ac-0-0"
                              >
                                <span
                                  data-offset-key="bv0ac-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h3
                                  </span>
                                </span>
                              </div>
                            </h3>
                            <blockquote
                              class="Draftail-block--blockquote "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="2ip7q-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="2ip7q-0-0"
                              >
                                <span
                                  data-offset-key="2ip7q-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    blockquote
                                  </span>
                                </span>
                              </div>
                            </blockquote>
                            <ul
                              class="public-DraftStyleDefault-ul"
                              data-offset-key="8r8ss-0-0"
                            >
                              <li
                                class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="8r8ss-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="8r8ss-0-0"
                                >
                                  <span
                                    data-offset-key="8r8ss-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ul
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ul>
                            <ol
                              class="public-DraftStyleDefault-ol"
                              data-offset-key="911hc-0-0"
                            >
                              <li
                                class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="911hc-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="911hc-0-0"
                                >
                                  <span
                                    data-offset-key="911hc-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ol
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ol>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="5aejo-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="5aejo-0-0"
                              >
                                <span
                                  data-offset-key="5aejo-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    link
                                  </span>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this page easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                URL
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="slug"
                    placeholder="About"
                    type="text"
                    value="about"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id"
                        />
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Hidden
                      <div />
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="publicationDate"
                    type="date"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id PageInfo-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="title"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Content
                  </span>
                  <div
                    class="Draftail-Editor"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="testKey-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="testKey-0-0"
                              >
                                <span
                                  data-offset-key="testKey-0-0"
                                >
                                  <br
                                    data-text="true"
                                  />
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this page easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                URL
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="slug"
                    placeholder=""
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  If empty, URL will be autogenerated from Page Name
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id"
                        />
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Hidden
                      <div />
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                    disabled=""
                    name="publicationDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Pages
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add page
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PageList-colTitle-id"
              scope="col"
            >
              Title
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PageList-colSlug-id"
              scope="col"
            >
              Slug
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PageList-colVisibility-id"
              scope="col"
            >
              Visibility
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id PageList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
            >
              About
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
            >
              about
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Published
              </div>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id PageList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
            >
              About
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
            >
              about
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                Not Published
              </div>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id PageList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
            >
              About
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
            >
              about
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Published
              </div>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id PageList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
            >
              About
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
            >
              about
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Published
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Pages
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add page
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PageList-colTitle-id"
              scope="col"
            >
              Title
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PageList-colSlug-id"
              scope="col"
            >
              Slug
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PageList-colVisibility-id"
              scope="col"
            >
              Visibility
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colTitle-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colSlug-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PageList-colVisibility-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Pages
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add page
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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-paddingDense-id PageList-colTitle-id"
              scope="col"
            >
              Title
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PageList-colSlug-id"
              scope="col"
            >
              Slug
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PageList-colVisibility-id"
              scope="col"
            >
              Visibility
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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>
`;

exports[`Storyshots Views / Plugins / Plugin details default 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Username or account Details
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <h6
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Information and Status
          </h6>
          <p
            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 brow sers taskbar.
          </p>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
          >
            <h6
              class="MuiTypography-root-id MuiTypography-h6-id Hook-title-id"
            >
              Plugin Name
            </h6>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Username or account
            </p>
            <h6
              class="MuiTypography-root-id MuiTypography-h6-id Hook-title-id"
            >
              Description
            </h6>
            <p
              class="MuiTypography-root-id MuiTypography-body2-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.
            </p>
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Hook-status-id"
            >
              Status
            </p>
            <label
              class="MuiFormControlLabel-root-id"
            >
              <span
                class="MuiSwitch-root-id"
              >
                <span
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <span
                      class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                    />
                    <input
                      checked=""
                      class="MuiPrivateSwitchBase-input-id"
                      name="active"
                      type="checkbox"
                    />
                  </span>
                </span>
                <span
                  class="MuiSwitch-bar-id"
                />
              </span>
              <span
                class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
              >
                <div
                  class="ControlledSwitch-label-id"
                >
                  <span
                    class="ControlledSwitch-labelText-id"
                  >
                    Set plugin as Active
                  </span>
                  <div />
                </div>
              </span>
            </label>
          </div>
        </div>
        <div>
          <h6
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Settings
          </h6>
          <p
            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.
          </p>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Plugin 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="Hook-item-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Username or account
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="Username or account"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  Provide user or account details
                </p>
              </div>
            </div>
            <div
              class="Hook-item-id"
            >
              <div
                class="MuiFormControl-root-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 or license
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="Password or license"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  Provide password or license details
                </p>
              </div>
            </div>
            <div
              class="Hook-item-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="Use sandbox"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use sandbox
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
        </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Username or account Details
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <h6
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Information and Status
          </h6>
          <p
            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 brow sers taskbar.
          </p>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
          >
            <h6
              class="MuiTypography-root-id MuiTypography-h6-id Hook-title-id"
            >
              Plugin Name
            </h6>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            >
              Username or account
            </p>
            <h6
              class="MuiTypography-root-id MuiTypography-h6-id Hook-title-id"
            >
              Description
            </h6>
            <p
              class="MuiTypography-root-id MuiTypography-body2-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.
            </p>
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Hook-status-id"
            >
              Status
            </p>
            <label
              class="MuiFormControlLabel-root-id"
            >
              <span
                class="MuiSwitch-root-id"
              >
                <span
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <span
                      class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                    />
                    <input
                      checked=""
                      class="MuiPrivateSwitchBase-input-id"
                      name="active"
                      type="checkbox"
                    />
                  </span>
                </span>
                <span
                  class="MuiSwitch-bar-id"
                />
              </span>
              <span
                class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
              >
                <div
                  class="ControlledSwitch-label-id"
                >
                  <span
                    class="ControlledSwitch-labelText-id"
                  >
                    Set plugin as Active
                  </span>
                  <div />
                </div>
              </span>
            </label>
          </div>
        </div>
        <div>
          <h6
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Settings
          </h6>
          <p
            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.
          </p>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Plugin 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="Hook-item-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                  data-shrink="false"
                >
                  Username or account
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="Username or account"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  Provide user or account details
                </p>
              </div>
            </div>
            <div
              class="Hook-item-id"
            >
              <div
                class="MuiFormControl-root-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 or license
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="Password or license"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                >
                  Provide password or license details
                </p>
              </div>
            </div>
            <div
              class="Hook-item-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="Use sandbox"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Use sandbox
                    </span>
                    <div />
                  </div>
                </span>
              </label>
            </div>
          </div>
        </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          ... Details
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <h6
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Information and Status
          </h6>
          <p
            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 brow sers taskbar.
          </p>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
          >
            <h6
              class="MuiTypography-root-id MuiTypography-h6-id Hook-title-id"
            >
              Plugin Name
            </h6>
            <p
              class="MuiTypography-root-id MuiTypography-body2-id"
            />
            <div
              class="FormSpacer-spacer-id"
            />
            <hr
              class="Hr-root-id"
            />
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Hook-status-id"
            >
              Status
            </p>
            <label
              class="MuiFormControlLabel-root-id"
            >
              <span
                class="MuiSwitch-root-id"
              >
                <span
                  class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <span
                      class="MuiSwitch-icon-id"
                    />
                    <input
                      class="MuiPrivateSwitchBase-input-id"
                      name="active"
                      type="checkbox"
                    />
                  </span>
                </span>
                <span
                  class="MuiSwitch-bar-id"
                />
              </span>
              <span
                class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
              >
                <div
                  class="ControlledSwitch-label-id"
                >
                  <span
                    class="ControlledSwitch-labelText-id"
                  >
                    Set plugin as Active
                  </span>
                  <div />
                </div>
              </span>
            </label>
          </div>
        </div>
        <div>
          <h6
            class="MuiTypography-root-id MuiTypography-h6-id"
          >
            Plugin Settings
          </h6>
          <p
            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.
          </p>
        </div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Plugin Settings
            </span>
            <div
              class="CardTitle-toolbar-id"
            />
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-id"
          />
          <div
            class="MuiCardContent-root-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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Plugins
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <table
        class="MuiTable-root-id"
      >
        <thead
          class="MuiTableHead-root-id"
        >
          <tr>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colName-id"
              scope="col"
            >
              Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colActive-id"
              scope="col"
            >
              Active
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colAction-id"
              scope="col"
            >
              Action
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id PluginList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colName-id"
            >
              Avalara
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colActive-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-successDot-id"
              >
                Yes
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colAction-id"
            >
              <div>
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </div>
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id PluginList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colName-id"
            >
              VatLayer
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colActive-id"
            >
              <div
                class="StatusLabel-root-id undefined StatusLabel-errorDot-id"
              >
                No
              </div>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colAction-id"
            >
              <div>
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Plugins
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <table
        class="MuiTable-root-id"
      >
        <thead
          class="MuiTableHead-root-id"
        >
          <tr>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colName-id"
              scope="col"
            >
              Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colActive-id"
              scope="col"
            >
              Active
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colAction-id"
              scope="col"
            >
              Action
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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 PluginList-colName-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colActive-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id PluginList-colAction-id"
            >
              <div>
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id"
                  focusable="false"
                  role="presentation"
                  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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </div>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Plugins
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <table
        class="MuiTable-root-id"
      >
        <thead
          class="MuiTableHead-root-id"
        >
          <tr>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colName-id"
              scope="col"
            >
              Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colActive-id"
              scope="col"
            >
              Active
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingDense-id PluginList-colAction-id"
              scope="col"
            >
              Action
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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 plugins found
            </td>
          </tr>
        </tbody>
      </table>
    </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create product type
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeTaxes-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="isShippingRequired"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create product type
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeTaxes-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="isShippingRequired"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeTaxes-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="isShippingRequired"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          E-books
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="E-books"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeTaxes-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="PH405458"
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            />
            <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"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id TableHead-dragRows-id"
                    scope="col"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </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 MuiTableRow-hover-id ProductTypeAttributes-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                  >
                    Language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                  >
                    language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                  >
                    Publisher
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                  >
                    publisher
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                name="hasVariants"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
            >
              This product type has variants
            </span>
          </label>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="isShippingRequired"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          E-books
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="E-books"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeTaxes-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="PH405458"
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            />
            <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"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id TableHead-dragRows-id"
                    scope="col"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </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 MuiTableRow-hover-id ProductTypeAttributes-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                  >
                    Author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                  >
                    author
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                  >
                    Language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                  >
                    language
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeAttributes-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                  >
                    Publisher
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                  >
                    publisher
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                name="hasVariants"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
            >
              This product type has variants
            </span>
          </label>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="isShippingRequired"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeTaxes-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <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"
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            />
            <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"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id MuiTableCell-paddingCheckbox-id TableHead-dragRows-id"
                    scope="col"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id Checkbox-disabled-id"
                        disabled=""
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id Hook-columnDrag-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id"
                      focusable="false"
                      role="presentation"
                      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"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id Checkbox-disabled-id"
                        disabled=""
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colName-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-colSlug-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeAttributes-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
              disabled=""
              tabindex="-1"
              type="button"
            >
              <input
                class="Checkbox-box-id Checkbox-disabled-id"
                disabled=""
                name="hasVariants"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
            >
              This product type has variants
            </span>
          </label>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="isShippingRequired"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          E-books
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeDetails-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Product Type Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="E-books"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductTypeTaxes-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="PH405458"
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Product Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            />
            <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 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"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="5"
                  >
                    No attributes found
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <label
            class="MuiFormControlLabel-root-id"
          >
            <button
              class="MuiButtonBase-root-id Checkbox-root-id"
              tabindex="0"
              type="button"
            >
              <input
                class="Checkbox-box-id"
                name="hasVariants"
                type="checkbox"
                value="false"
              />
            </button>
            <span
              class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
            >
              This product type has variants
            </span>
          </label>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="isShippingRequired"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Product Types
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add product type 
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colName-id"
              scope="col"
            >
              Type Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colType-id"
              scope="col"
            >
              Type
            </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id ProductTypeList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
            >
              Candy
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Configurable
              </span>
            </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 MuiTableRow-hover-id ProductTypeList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
            >
              E-books
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Simple product
              </span>
            </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 MuiTableRow-hover-id ProductTypeList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
            >
              Mugs
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Simple product
              </span>
            </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 MuiTableRow-hover-id ProductTypeList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
            >
              Coffee
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Configurable
              </span>
            </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 MuiTableRow-hover-id ProductTypeList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
            >
              <button
                class="MuiButtonBase-root-id Checkbox-root-id"
                tabindex="0"
                type="button"
              >
                <input
                  class="Checkbox-box-id"
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
            >
              T-Shirt
              <span
                class="MuiTypography-root-id MuiTypography-caption-id"
              >
                Configurable
              </span>
            </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>
`;

exports[`Storyshots Views / Product types / Product types list loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Product Types
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add product type 
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colName-id"
              scope="col"
            >
              Type Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id ProductTypeList-colType-id"
              scope="col"
            >
              Type
            </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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <input
                  class="Checkbox-box-id Checkbox-disabled-id"
                  disabled=""
                  type="checkbox"
                  value="false"
                />
              </button>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colName-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colType-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id ProductTypeList-colTax-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
`;

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

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

exports[`Storyshots Views / Products / Create product When loading 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add product
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductDetailsForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="name"
                      rows="5"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="testKey-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="testKey-0-0"
                              >
                                <span
                                  data-offset-key="testKey-0-0"
                                >
                                  <br
                                    data-text="true"
                                  />
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id Hook-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Hook-cardContent-id"
            >
              <div
                class="Hook-expansionBar-id"
              >
                <div
                  class="Hook-expansionBarLabelContainer-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id Hook-expansionBarLabel-id"
                  >
                    0 Attributes
                  </span>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id Hook-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id Hook-expansionBarButtonIcon-id Hook-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="chargeTaxes"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  Charge taxes for this item
                </span>
              </label>
            </div>
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductPricing-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Price
                  </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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      name="basePrice"
                      type="number"
                      value="0"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                    >
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="sku"
                      type="text"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Inventory
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                      disabled=""
                      name="stockQuantity"
                      type="number"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this product easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-tc="product-type"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id"
                        />
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Hidden
                      <div />
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                    disabled=""
                    name="publicationDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add product
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductDetailsForm-root-id"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="name"
                      rows="5"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="testKey-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="testKey-0-0"
                              >
                                <span
                                  data-offset-key="testKey-0-0"
                                >
                                  <br
                                    data-text="true"
                                  />
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id Hook-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Hook-cardContent-id"
            >
              <div
                class="Hook-expansionBar-id"
              >
                <div
                  class="Hook-expansionBarLabelContainer-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id Hook-expansionBarLabel-id"
                  >
                    0 Attributes
                  </span>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id Hook-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id Hook-expansionBarButtonIcon-id Hook-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="chargeTaxes"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Charge taxes for this item
                </span>
              </label>
            </div>
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductPricing-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      name="basePrice"
                      type="number"
                      value="0"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                    >
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-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-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Inventory
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="stockQuantity"
                      type="number"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this product easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-tc="product-type"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id"
                        />
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Hidden
                      <div />
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="publicationDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add product
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductDetailsForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="name"
                      rows="5"
                      type="text"
                      value=""
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Generic form error
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="testKey-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="testKey-0-0"
                              >
                                <span
                                  data-offset-key="testKey-0-0"
                                >
                                  <br
                                    data-text="true"
                                  />
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id Hook-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Hook-cardContent-id"
            >
              <div
                class="Hook-expansionBar-id"
              >
                <div
                  class="Hook-expansionBarLabelContainer-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id Hook-expansionBarLabel-id"
                  >
                    0 Attributes
                  </span>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id Hook-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id Hook-expansionBarButtonIcon-id Hook-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    name="chargeTaxes"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Charge taxes for this item
                </span>
              </label>
            </div>
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductPricing-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      name="basePrice"
                      type="number"
                      value="0"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                    >
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        USD
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                  >
                    Generic form error
                  </p>
                </div>
                <div
                  class="MuiFormControl-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Inventory
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="stockQuantity"
                      type="number"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this product easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-tc="product-type"
              >
                <div
                  class="MuiFormControl-root-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    Generic form error
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="true"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                  >
                    Generic form error
                  </p>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id"
                        />
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Hidden
                      <div />
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                    name="publicationDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add variant
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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-tabActive-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          role="presentation"
                          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
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    New Variant
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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="SingleAutocompleteSelectField-container-id"
                  data-tc="variant-attribute-input"
                >
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Color
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        autocomplete="off"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        type="text"
                        value=""
                      />
                      <div>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Cost price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Stock
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantStock-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="0"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add variant
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    Cordoba Oro
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-tabActive-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          role="presentation"
                          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
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    New Variant
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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="SingleAutocompleteSelectField-container-id"
                  data-tc="variant-attribute-input"
                >
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Color
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        autocomplete="off"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        type="text"
                        value=""
                      />
                      <div>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Cost price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Stock
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantStock-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="0"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add variant
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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 TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          role="presentation"
                          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
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    New Variant
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Selling price override
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Cost price override
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Stock
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantStock-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="quantity"
                        type="text"
                        value="0"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="sku"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Add variant
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    Cordoba Oro
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder255x255.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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-tabActive-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          role="presentation"
                          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
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    New Variant
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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="SingleAutocompleteSelectField-container-id"
                  data-tc="variant-attribute-input"
                >
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Color
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        autocomplete="off"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        type="text"
                        value=""
                      />
                      <div>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Cost price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Stock
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantStock-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="0"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value=""
                      />
                    </div>
                  </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Ergonomic Plastic Bacon
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductDetailsForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="name"
                      rows="5"
                      type="text"
                      value="Ergonomic Plastic Bacon"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor Draftail-Editor--hide-placeholder"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="rosn-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="rosn-0-0"
                              >
                                <span
                                  data-offset-key="rosn-0-0"
                                  style="font-weight:bold"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    bold
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="6tbch-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="6tbch-0-0"
                              >
                                <span
                                  data-offset-key="6tbch-0-0"
                                  style="font-style:italic"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    italic
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="1p044-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="1p044-0-0"
                              >
                                <span
                                  data-offset-key="1p044-0-0"
                                  style="text-decoration:line-through"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    strikethrough
                                  </span>
                                </span>
                              </div>
                            </div>
                            <h1
                              class="Draftail-block--header-one "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="aven6-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="aven6-0-0"
                              >
                                <span
                                  data-offset-key="aven6-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h1
                                  </span>
                                </span>
                              </div>
                            </h1>
                            <h2
                              class="Draftail-block--header-two "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="9rabl-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="9rabl-0-0"
                              >
                                <span
                                  data-offset-key="9rabl-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h2
                                  </span>
                                </span>
                              </div>
                            </h2>
                            <h3
                              class="Draftail-block--header-three "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="bv0ac-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="bv0ac-0-0"
                              >
                                <span
                                  data-offset-key="bv0ac-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h3
                                  </span>
                                </span>
                              </div>
                            </h3>
                            <blockquote
                              class="Draftail-block--blockquote "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="2ip7q-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="2ip7q-0-0"
                              >
                                <span
                                  data-offset-key="2ip7q-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    blockquote
                                  </span>
                                </span>
                              </div>
                            </blockquote>
                            <ul
                              class="public-DraftStyleDefault-ul"
                              data-offset-key="8r8ss-0-0"
                            >
                              <li
                                class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="8r8ss-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="8r8ss-0-0"
                                >
                                  <span
                                    data-offset-key="8r8ss-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ul
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ul>
                            <ol
                              class="public-DraftStyleDefault-ol"
                              data-offset-key="911hc-0-0"
                            >
                              <li
                                class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="911hc-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="911hc-0-0"
                                >
                                  <span
                                    data-offset-key="911hc-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ol
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ol>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="5aejo-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="5aejo-0-0"
                              >
                                <span
                                  data-offset-key="5aejo-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    link
                                  </span>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ProductImages-imageGridContainer-id"
            >
              <div
                class="ImageUpload-photosIconContainer-id ProductImages-imageUpload-id"
                tabindex="0"
              >
                <div
                  class="ProductImages-imageUploadIcon-id"
                >
                  <input
                    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"
                    role="presentation"
                    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>
                  <p
                    class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
                  >
                    Drop here to upload
                  </p>
                </div>
              </div>
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductImages-root-id"
                >
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id Hook-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Hook-cardContent-id"
            >
              <div
                class="Hook-expansionBar-id"
              >
                <div
                  class="Hook-expansionBarLabelContainer-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id Hook-expansionBarLabel-id"
                  >
                    2 Attributes
                  </span>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id Hook-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id Hook-expansionBarButtonIcon-id Hook-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="Hook-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="Hook-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    Borders
                  </p>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="Hook-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="Hook-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    Legacy
                  </p>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-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"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <span
                          class="MuiTypography-root-id MuiTypography-caption-id MultiAutocompleteSelectField-chipLabel-id"
                        >
                          Auto Loan Account
                        </span>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                              focusable="false"
                              role="presentation"
                              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"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="chargeTaxes"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Charge taxes for this item
                </span>
              </label>
            </div>
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductPricing-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      name="basePrice"
                      type="number"
                      value="339.39"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                    >
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        NZD
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  data-tc="button-edit-attributes"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit attributes
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  data-tc="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Use variants for products that come in a variety of versions for example different sizes or colors
              </p>
            </div>
            <table
              class="MuiTable-root-id ProductVariants-denseTable-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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
                    scope="col"
                  >
                    Name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
                    scope="col"
                  >
                    SKU
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariants-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                  >
                    Cordoba Oro
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Available
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                  >
                    87192-94370
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariants-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                  >
                    silver
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Available
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                  >
                    69055-15190
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this product easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id ProductOrganization-label-id"
              >
                Product Type
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Versatile
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id ProductOrganization-label-id"
              >
                Product Type
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Configurable
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </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"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id MultiAutocompleteSelectField-chipLabel-id"
                    >
                      Winter sale
                    </span>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                          focusable="false"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-expandedSwitchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                        />
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Visible
                      <div>
                        since Aug 25, 2018
                      </div>
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductDetailsForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="name"
                      rows="5"
                      type="text"
                      value=""
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="testKey-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="testKey-0-0"
                              >
                                <span
                                  data-offset-key="testKey-0-0"
                                >
                                  <br
                                    data-text="true"
                                  />
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ProductImages-imageGridContainer-id"
            >
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductImages-root-id"
                >
                  <div
                    class="ProductImages-imageContainer-id"
                  >
                    <img
                      class="ProductImages-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id Hook-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Hook-cardContent-id"
            >
              <div
                class="Hook-expansionBar-id"
              >
                <div
                  class="Hook-expansionBarLabelContainer-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id Hook-expansionBarLabel-id"
                  >
                    0 Attributes
                  </span>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id Hook-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id Hook-expansionBarButtonIcon-id Hook-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="chargeTaxes"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  Charge taxes for this item
                </span>
              </label>
            </div>
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductPricing-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Price
                  </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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      disabled=""
                      name="basePrice"
                      type="number"
                      value="0"
                    />
                    <span />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                      disabled=""
                      name="sku"
                      type="text"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                    data-shrink="false"
                  >
                    Inventory
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                      disabled=""
                      name="stockQuantity"
                      type="number"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this product easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id ProductOrganization-label-id"
              >
                Product Type
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                ...
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id ProductOrganization-label-id"
              >
                Product Type
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                ...
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </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 MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-switchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                      tabindex="-1"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id"
                        />
                        <input
                          class="MuiPrivateSwitchBase-input-id"
                          disabled=""
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Hidden
                      <div />
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id VisibilityCard-date-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id"
                    disabled=""
                    name="publicationDate"
                    type="date"
                    value=""
                  />
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Ergonomic Plastic Bacon
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductDetailsForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="name"
                      rows="5"
                      type="text"
                      value="Ergonomic Plastic Bacon"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor Draftail-Editor--hide-placeholder"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="rosn-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="rosn-0-0"
                              >
                                <span
                                  data-offset-key="rosn-0-0"
                                  style="font-weight:bold"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    bold
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="6tbch-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="6tbch-0-0"
                              >
                                <span
                                  data-offset-key="6tbch-0-0"
                                  style="font-style:italic"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    italic
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="1p044-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="1p044-0-0"
                              >
                                <span
                                  data-offset-key="1p044-0-0"
                                  style="text-decoration:line-through"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    strikethrough
                                  </span>
                                </span>
                              </div>
                            </div>
                            <h1
                              class="Draftail-block--header-one "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="aven6-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="aven6-0-0"
                              >
                                <span
                                  data-offset-key="aven6-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h1
                                  </span>
                                </span>
                              </div>
                            </h1>
                            <h2
                              class="Draftail-block--header-two "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="9rabl-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="9rabl-0-0"
                              >
                                <span
                                  data-offset-key="9rabl-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h2
                                  </span>
                                </span>
                              </div>
                            </h2>
                            <h3
                              class="Draftail-block--header-three "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="bv0ac-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="bv0ac-0-0"
                              >
                                <span
                                  data-offset-key="bv0ac-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h3
                                  </span>
                                </span>
                              </div>
                            </h3>
                            <blockquote
                              class="Draftail-block--blockquote "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="2ip7q-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="2ip7q-0-0"
                              >
                                <span
                                  data-offset-key="2ip7q-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    blockquote
                                  </span>
                                </span>
                              </div>
                            </blockquote>
                            <ul
                              class="public-DraftStyleDefault-ul"
                              data-offset-key="8r8ss-0-0"
                            >
                              <li
                                class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="8r8ss-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="8r8ss-0-0"
                                >
                                  <span
                                    data-offset-key="8r8ss-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ul
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ul>
                            <ol
                              class="public-DraftStyleDefault-ol"
                              data-offset-key="911hc-0-0"
                            >
                              <li
                                class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="911hc-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="911hc-0-0"
                                >
                                  <span
                                    data-offset-key="911hc-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ol
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ol>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="5aejo-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="5aejo-0-0"
                              >
                                <span
                                  data-offset-key="5aejo-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    link
                                  </span>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ProductImages-imageGridContainer-id"
            >
              <div
                class="ImageUpload-photosIconContainer-id"
                tabindex="0"
              >
                <div
                  class=""
                >
                  <input
                    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"
                    role="presentation"
                    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>
                  <p
                    class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
                  >
                    Drop here to upload
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id Hook-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Hook-cardContent-id"
            >
              <div
                class="Hook-expansionBar-id"
              >
                <div
                  class="Hook-expansionBarLabelContainer-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id Hook-expansionBarLabel-id"
                  >
                    2 Attributes
                  </span>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id Hook-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id Hook-expansionBarButtonIcon-id Hook-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="Hook-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="Hook-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    Borders
                  </p>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="Hook-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="Hook-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    Legacy
                  </p>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-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"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <span
                          class="MuiTypography-root-id MuiTypography-caption-id MultiAutocompleteSelectField-chipLabel-id"
                        >
                          Auto Loan Account
                        </span>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                              focusable="false"
                              role="presentation"
                              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"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="chargeTaxes"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Charge taxes for this item
                </span>
              </label>
            </div>
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductPricing-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      name="basePrice"
                      type="number"
                      value="339.39"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                    >
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        NZD
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  data-tc="button-edit-attributes"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Edit attributes
                  </span>
                </button>
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  data-tc="button-add-variant"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add variant
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Use variants for products that come in a variety of versions for example different sizes or colors
              </p>
            </div>
            <table
              class="MuiTable-root-id ProductVariants-denseTable-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"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colName-id"
                    scope="col"
                  >
                    Name
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colStatus-id"
                    scope="col"
                  >
                    Status
                  </th>
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-id ProductVariants-colSku-id"
                    scope="col"
                  >
                    SKU
                  </th>
                </tr>
              </thead>
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariants-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                  >
                    Cordoba Oro
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Available
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                  >
                    87192-94370
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariants-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                  >
                    <button
                      class="MuiButtonBase-root-id Checkbox-root-id"
                      tabindex="0"
                      type="button"
                    >
                      <input
                        class="Checkbox-box-id"
                        type="checkbox"
                        value="false"
                      />
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colName-id"
                  >
                    silver
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colStatus-id"
                  >
                    <div
                      class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                    >
                      Available
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariants-colSku-id"
                  >
                    69055-15190
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this product easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id ProductOrganization-label-id"
              >
                Product Type
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Versatile
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id ProductOrganization-label-id"
              >
                Product Type
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Configurable
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </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"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id MultiAutocompleteSelectField-chipLabel-id"
                    >
                      Winter sale
                    </span>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                          focusable="false"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-expandedSwitchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                        />
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Visible
                      <div>
                        since Aug 25, 2018
                      </div>
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Ergonomic Plastic Bacon
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductDetailsForm-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Name
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="name"
                      rows="5"
                      type="text"
                      value="Ergonomic Plastic Bacon"
                    />
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="RichTextEditor-root-id RichTextEditor-scroll-id"
              >
                <div
                  class="RichTextEditor-input-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id MuiTypography-colorPrimary-id RichTextEditor-label-id"
                  >
                    Description
                  </span>
                  <div
                    class="Draftail-Editor Draftail-Editor--hide-placeholder"
                  >
                    <div
                      class="Draftail-Toolbar"
                      role="toolbar"
                    >
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Bold
Ctrl + B"
                          class="Draftail-ToolbarButton Draftail-ToolbarButton--active"
                          data-draftail-balloon="true"
                          name="BOLD"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M9.02336 6.79C10.0411 6.12 10.7546 5.02 10.7546 4C10.7546 1.74 8.91844 0 6.55768 0H0V14H7.38657C9.57945 14 11.2792 12.3 11.2792 10.21C11.2792 8.69 10.3769 7.39 9.02336 6.79V6.79ZM3.14768 2.5H6.29537C7.16623 2.5 7.86921 3.17 7.86921 4C7.86921 4.83 7.16623 5.5 6.29537 5.5H3.14768V2.5ZM6.81998 11.5H3.14768V8.5H6.81998C7.69084 8.5 8.39383 9.17 8.39383 10C8.39383 10.83 7.69084 11.5 6.81998 11.5Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Italic
Ctrl + I"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ITALIC"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-smallIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M4.19691 0V3H6.51571L2.92735 11H0V14H8.39383V11H6.07503L9.66339 3H12.5907V0H4.19691Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Strikethrough
Ctrl + ⇧ + X"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="STRIKETHROUGH"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M6.53333 14H10.2667V11.2H6.53333V14ZM1.86667 0V2.8H6.53333V5.6H10.2667V2.8H14.9333V0H1.86667ZM0 9.33333H16.8V7.46667H0V9.33333Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Heading 1
#"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-one"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 14H3.10341V8.2168H8.4V14H11.4962V0H8.4V5.77637H3.10341V0H0V7V14Z"
                            />
                            <path
                              d="M19.5997 0H16.611C16.5751 0.854492 15.3137 2.31055 13.4287 2.31055V4.66211C15.0485 4.66211 16.1021 4.08789 16.4175 3.62305H16.5536V14H19.5997V0Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 2
##"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-two"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M11.2857 14H8.42857V8.0813H2.85714V14H0V0.189702H2.85714V5.78591H8.42857V0.189702H11.2857V14Z"
                            />
                            <path
                              d="M23 14H13.4952V12.122L17.981 7.36043C18.5968 6.69015 19.0508 6.10524 19.3429 5.60569C19.6413 5.10614 19.7905 4.63189 19.7905 4.18293C19.7905 3.56956 19.6349 3.08898 19.3238 2.74119C19.0127 2.38708 18.5683 2.21003 17.9905 2.21003C17.3683 2.21003 16.8762 2.42502 16.5143 2.85501C16.1587 3.27868 15.981 3.8383 15.981 4.53388H13.219C13.219 3.69286 13.419 2.92457 13.819 2.229C14.2254 1.53342 14.7968 0.989612 15.5333 0.597561C16.2698 0.199187 17.1048 0 18.0381 0C19.4667 0 20.5746 0.341463 21.3619 1.02439C22.1556 1.70732 22.5524 2.67164 22.5524 3.91734C22.5524 4.60027 22.3746 5.29584 22.019 6.00407C21.6635 6.71229 21.054 7.53749 20.1905 8.47967L17.0381 11.79H23V14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Heading 3
###"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="header-three"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10.8943 13.8128H8.13623V7.97326H2.75804V13.8128H0V0.187166H2.75804V5.70856H8.13623V0.187166H10.8943V13.8128Z"
                            />
                            <path
                              d="M15.73 5.80214H17.1458C17.82 5.80214 18.3195 5.63057 18.6444 5.28743C18.9692 4.9443 19.1316 4.48886 19.1316 3.92112C19.1316 3.3721 18.9692 2.94474 18.6444 2.63904C18.3257 2.33333 17.8844 2.18048 17.3205 2.18048C16.8118 2.18048 16.3858 2.32398 16.0426 2.61096C15.6994 2.89171 15.5278 3.2598 15.5278 3.71524H12.8709C12.8709 3.00401 13.0578 2.36765 13.4317 1.80615C13.8117 1.23841 14.3388 0.795455 15.013 0.477273C15.6933 0.159091 16.441 0 17.2562 0C18.672 0 19.7813 0.346257 20.5842 1.03877C21.3871 1.72504 21.7885 2.67335 21.7885 3.88369C21.7885 4.50758 21.6016 5.08155 21.2277 5.60562C20.8539 6.12968 20.3636 6.53209 19.7568 6.81283C20.5107 7.08734 21.0715 7.49911 21.4392 8.04813C21.8131 8.59715 22 9.24599 22 9.99465C22 11.205 21.5648 12.1751 20.6945 12.9051C19.8303 13.635 18.6842 14 17.2562 14C15.92 14 14.826 13.6413 13.9741 12.9238C13.1283 12.2063 12.7054 11.258 12.7054 10.0789H15.3623C15.3623 10.5905 15.5492 11.0085 15.9231 11.3329C16.3031 11.6573 16.7689 11.8195 17.3205 11.8195C17.9518 11.8195 18.4452 11.6511 18.8007 11.3142C19.1623 10.971 19.3431 10.5187 19.3431 9.95722C19.3431 8.59715 18.6076 7.91711 17.1366 7.91711H15.73V5.80214Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Blockquote
>"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="blockquote"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46891 14H5.87564L8.81345 8.4V0H0V8.4H4.40673L1.46891 14ZM13.2202 14H17.6269L20.5647 8.4V0H11.7513V8.4H16.158L13.2202 14Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Bulleted list
-"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="unordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.46892 5.6C0.656117 5.6 0 6.22533 0 7C0 7.77467 0.656117 8.4 1.46892 8.4C2.28172 8.4 2.93784 7.77467 2.93784 7C2.93784 6.22533 2.28172 5.6 1.46892 5.6ZM1.46892 0C0.656117 0 0 0.625333 0 1.4C0 2.17467 0.656117 2.8 1.46892 2.8C2.28172 2.8 2.93784 2.17467 2.93784 1.4C2.93784 0.625333 2.28172 0 1.46892 0ZM1.46892 11.2C0.656117 11.2 0 11.8347 0 12.6C0 13.3653 0.66591 14 1.46892 14C2.27193 14 2.93784 13.3653 2.93784 12.6C2.93784 11.8347 2.28172 11.2 1.46892 11.2ZM4.40676 13.5333H18.1167V11.6667H4.40676V13.5333ZM4.40676 7.93333H18.1167V6.06667H4.40676V7.93333ZM4.40676 0.466667V2.33333H18.1167V0.466667H4.40676Z"
                            />
                          </svg>
                        </button>
                        <button
                          aria-label="Numbered list
1."
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="ordered-list-item"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M0 12.9214H2V13.3979H1V14.351H2V14.8275H0V15.7806H3V11.9683H0V12.9214ZM1 4.34359H2V0.53125H0V1.48433H1V4.34359ZM0 7.20284H1.8L0 9.20432V10.0621H3V9.10901H1.2L3 7.10754V6.24976H0V7.20284ZM5 1.48433V3.3905H19V1.48433H5ZM5 14.8275H19V12.9214H5V14.8275ZM5 9.10901H19V7.20284H5V9.10901Z"
                            />
                          </svg>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Line break
⇧ + ↵"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="BR"
                          tabindex="-1"
                          type="button"
                        >
                          <span
                            class="Draftail-ToolbarButton__label"
                          >
                            ↵
                          </span>
                        </button>
                      </div>
                      <div
                        class="Draftail-ToolbarGroup"
                      >
                        <button
                          aria-label="Link
Ctrl + K"
                          class="Draftail-ToolbarButton"
                          data-draftail-balloon="true"
                          name="LINK"
                          tabindex="-1"
                          type="button"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id RichTextEditor-linkIcon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M1.99352 5C1.99352 3.29 3.45194 1.9 5.2461 1.9H9.44299V0H5.2461C2.35025 0 0 2.24 0 5C0 7.76 2.35025 10 5.2461 10H9.44299V8.1H5.2461C3.45194 8.1 1.99352 6.71 1.99352 5ZM6.29532 6H14.6891V4H6.29532V6ZM15.7383 0H11.5414V1.9H15.7383C17.5325 1.9 18.9909 3.29 18.9909 5C18.9909 6.71 17.5325 8.1 15.7383 8.1H11.5414V10H15.7383C18.6342 10 20.9844 7.76 20.9844 5C20.9844 2.24 18.6342 0 15.7383 0Z"
                            />
                          </svg>
                        </button>
                      </div>
                    </div>
                    <div
                      class="DraftEditor-root"
                    >
                      <div
                        class="DraftEditor-editorContainer"
                      >
                        <div
                          aria-describedby="placeholder-testKey"
                          class="notranslate public-DraftEditor-content"
                          contenteditable="true"
                          role="textbox"
                          spellcheck="false"
                          style="outline:none;user-select:text;-webkit-user-select:text;white-space:pre-wrap;word-wrap:break-word"
                        >
                          <div
                            data-contents="true"
                          >
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="rosn-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="rosn-0-0"
                              >
                                <span
                                  data-offset-key="rosn-0-0"
                                  style="font-weight:bold"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    bold
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="6tbch-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="6tbch-0-0"
                              >
                                <span
                                  data-offset-key="6tbch-0-0"
                                  style="font-style:italic"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    italic
                                  </span>
                                </span>
                              </div>
                            </div>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="1p044-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="1p044-0-0"
                              >
                                <span
                                  data-offset-key="1p044-0-0"
                                  style="text-decoration:line-through"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    strikethrough
                                  </span>
                                </span>
                              </div>
                            </div>
                            <h1
                              class="Draftail-block--header-one "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="aven6-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="aven6-0-0"
                              >
                                <span
                                  data-offset-key="aven6-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h1
                                  </span>
                                </span>
                              </div>
                            </h1>
                            <h2
                              class="Draftail-block--header-two "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="9rabl-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="9rabl-0-0"
                              >
                                <span
                                  data-offset-key="9rabl-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h2
                                  </span>
                                </span>
                              </div>
                            </h2>
                            <h3
                              class="Draftail-block--header-three "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="bv0ac-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="bv0ac-0-0"
                              >
                                <span
                                  data-offset-key="bv0ac-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    h3
                                  </span>
                                </span>
                              </div>
                            </h3>
                            <blockquote
                              class="Draftail-block--blockquote "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="2ip7q-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="2ip7q-0-0"
                              >
                                <span
                                  data-offset-key="2ip7q-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    blockquote
                                  </span>
                                </span>
                              </div>
                            </blockquote>
                            <ul
                              class="public-DraftStyleDefault-ul"
                              data-offset-key="8r8ss-0-0"
                            >
                              <li
                                class="Draftail-block--unordered-list-item  public-DraftStyleDefault-unorderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="8r8ss-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="8r8ss-0-0"
                                >
                                  <span
                                    data-offset-key="8r8ss-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ul
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ul>
                            <ol
                              class="public-DraftStyleDefault-ol"
                              data-offset-key="911hc-0-0"
                            >
                              <li
                                class="Draftail-block--ordered-list-item  public-DraftStyleDefault-orderedListItem public-DraftStyleDefault-reset public-DraftStyleDefault-depth0 public-DraftStyleDefault-listLTR"
                                data-block="true"
                                data-editor="testKey"
                                data-offset-key="911hc-0-0"
                              >
                                <div
                                  class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                  data-offset-key="911hc-0-0"
                                >
                                  <span
                                    data-offset-key="911hc-0-0"
                                  >
                                    <span
                                      data-text="true"
                                    >
                                      ol
                                    </span>
                                  </span>
                                </div>
                              </li>
                            </ol>
                            <div
                              class="Draftail-block--unstyled "
                              data-block="true"
                              data-editor="testKey"
                              data-offset-key="5aejo-0-0"
                            >
                              <div
                                class="public-DraftStyleDefault-block public-DraftStyleDefault-ltr"
                                data-offset-key="5aejo-0-0"
                              >
                                <span
                                  data-offset-key="5aejo-0-0"
                                >
                                  <span
                                    data-text="true"
                                  >
                                    link
                                  </span>
                                </span>
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImages-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  data-tc="button-upload-image"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Upload image
                  </span>
                </button>
                <input
                  class="ProductImages-fileField-id"
                  id="fileUpload"
                  type="file"
                />
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="ProductImages-imageGridContainer-id"
            >
              <div
                class="ImageUpload-photosIconContainer-id ProductImages-imageUpload-id"
                tabindex="0"
              >
                <div
                  class="ProductImages-imageUploadIcon-id"
                >
                  <input
                    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"
                    role="presentation"
                    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>
                  <p
                    class="MuiTypography-root-id MuiTypography-body1-id ImageUpload-uploadText-id"
                  >
                    Drop here to upload
                  </p>
                </div>
              </div>
              <div
                class="MuiCardContent-root-id"
              >
                <div
                  class="ProductImages-root-id"
                >
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="ImageTile-imageContainer-id"
                    data-tc="product-image"
                  >
                    <div
                      class="ImageTile-imageOverlay-id"
                    >
                      <div
                        class="ImageTile-imageOverlayToolbar-id"
                      />
                    </div>
                    <img
                      alt="Id sit dolores adipisci"
                      class="ImageTile-image-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id Hook-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Attributes
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id Hook-cardContent-id"
            >
              <div
                class="Hook-expansionBar-id"
              >
                <div
                  class="Hook-expansionBarLabelContainer-id"
                >
                  <span
                    class="MuiTypography-root-id MuiTypography-caption-id Hook-expansionBarLabel-id"
                  >
                    2 Attributes
                  </span>
                </div>
                <button
                  class="MuiButtonBase-root-id MuiIconButton-root-id Hook-expansionBarButton-id"
                  data-tc="product-attributes-expand"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiIconButton-label-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id Hook-expansionBarButtonIcon-id Hook-rotate-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </span>
                </button>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="Hook-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="Hook-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    Borders
                  </p>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="SingleAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                    >
                      <label
                        class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value="portals"
                        />
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <hr
                class="Hr-root-id"
              />
              <div
                class="Hook-attributeSection-id Grid-root-id Grid-uniform-id"
              >
                <div
                  class="Hook-attributeSectionLabel-id"
                  data-tc="product-attribute-label"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  >
                    Legacy
                  </p>
                </div>
                <div
                  data-tc="product-attribute-value"
                >
                  <div
                    class="MultiAutocompleteSelectField-container-id"
                  >
                    <div
                      class="MuiFormControl-root-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"
                      >
                        <fieldset
                          aria-hidden="true"
                          class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                          style="padding-left:8px"
                        >
                          <legend
                            class="MuiPrivateNotchedOutline-legend-id"
                            style="width:0.01px"
                          >
                            <span>
                              ​
                            </span>
                          </legend>
                        </fieldset>
                        <input
                          aria-invalid="false"
                          autocomplete="off"
                          class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                          type="text"
                          value=""
                        />
                        <div>
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <g
                              style="fill-rule:evenodd"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </g>
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="MultiAutocompleteSelectField-chipContainer-id"
                  >
                    <div
                      class="MultiAutocompleteSelectField-chip-id"
                    >
                      <div
                        class="MultiAutocompleteSelectField-chipInner-id"
                      >
                        <span
                          class="MuiTypography-root-id MuiTypography-caption-id MultiAutocompleteSelectField-chipLabel-id"
                        >
                          Auto Loan Account
                        </span>
                        <button
                          class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                          tabindex="0"
                          type="button"
                        >
                          <span
                            class="MuiIconButton-label-id"
                          >
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                              focusable="false"
                              role="presentation"
                              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"
                              />
                              <path
                                d="M0 0h24v24H0z"
                                fill="none"
                              />
                            </svg>
                          </span>
                        </button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Pricing
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            >
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="chargeTaxes"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  Charge taxes for this item
                </span>
              </label>
            </div>
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductPricing-root-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      name="basePrice"
                      type="number"
                      value="339.39"
                    />
                    <div
                      class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                    >
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                      >
                        NZD
                      </p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductStock-root-id"
              >
                <div
                  class="MuiFormControl-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    SKU (Stock Keeping Unit)
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                      name="sku"
                      type="text"
                      value="87192-94370"
                    />
                  </div>
                </div>
                <div
                  class="MuiFormControl-root-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                    data-shrink="true"
                  >
                    Inventory
                  </label>
                  <div
                    class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-formControl-id"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id"
                      name="stockQuantity"
                      type="number"
                      value="12"
                    />
                  </div>
                  <p
                    class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                  >
                    Allocated: 1
                  </p>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Search Engine Preview
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Add search engine title and description to make this product easier to find
              </p>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductOrganization-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
            >
              <span
                class="MuiTypography-root-id MuiTypography-caption-id ProductOrganization-label-id"
              >
                Product Type
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Versatile
              </p>
              <div
                class="CardSpacer-spacer-id"
              />
              <span
                class="MuiTypography-root-id MuiTypography-caption-id ProductOrganization-label-id"
              >
                Product Type
              </span>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Simple
              </p>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="SingleAutocompleteSelectField-container-id"
                data-tc="category"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="Apparel"
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
              <hr
                class="Hr-root-id"
              />
              <div
                class="FormSpacer-spacer-id"
              />
              <div
                class="MultiAutocompleteSelectField-container-id"
                data-tc="collections"
              >
                <div
                  class="MuiFormControl-root-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value=""
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </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"
                  >
                    <span
                      class="MuiTypography-root-id MuiTypography-caption-id MultiAutocompleteSelectField-chipLabel-id"
                    >
                      Winter sale
                    </span>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id MultiAutocompleteSelectField-chipClose-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-fontSizeSmall-id"
                          focusable="false"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="VisibilityCard-expandedSwitchContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <span
                    class="MuiSwitch-root-id"
                  >
                    <span
                      class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <span
                          class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                        />
                        <input
                          checked=""
                          class="MuiPrivateSwitchBase-input-id"
                          name="isPublished"
                          type="checkbox"
                        />
                      </span>
                    </span>
                    <span
                      class="MuiSwitch-bar-id"
                    />
                  </span>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    <div
                      class="ControlledSwitch-label-id"
                    >
                      Visible
                      <div>
                        since Aug 25, 2018
                      </div>
                    </div>
                  </span>
                </label>
              </div>
              <div
                class="FormSpacer-spacer-id"
              />
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Edit Photo
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImageNavigation-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                All Photos
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductImageNavigation-root-id"
              >
                <div
                  class="ProductImageNavigation-imageContainer-id"
                >
                  <img
                    class="ProductImageNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductImageNavigation-imageContainer-id"
                >
                  <img
                    class="ProductImageNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductImageNavigation-imageContainer-id"
                >
                  <img
                    class="ProductImageNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductImageNavigation-imageContainer-id"
                >
                  <img
                    class="ProductImageNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductImageNavigation-imageContainer-id"
                >
                  <img
                    class="ProductImageNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductImageNavigation-imageContainer-id"
                >
                  <img
                    class="ProductImageNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductImageNavigation-imageContainer-id"
                >
                  <img
                    class="ProductImageNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
                <div
                  class="ProductImageNavigation-imageContainer-id"
                >
                  <img
                    class="ProductImageNavigation-image-id"
                    src="placeholder1080x1080.png"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Photo 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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    >
                      Lorem ipsum
                    </textarea>
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      name="description"
                      rows="1"
                      style="height:19px"
                    >
                      Lorem ipsum
                    </textarea>
                  </div>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                >
                  Optional
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Photo 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="ProductImagePage-imageContainer-id"
              >
                <img
                  class="ProductImagePage-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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Edit Photo
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id ProductImageNavigation-card-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                All Photos
              </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"
              >
                ‌
              </span>
            </div>
          </div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Photo 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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <div
                    class="MuiPrivateTextarea-root-id"
                  >
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-hidden="true"
                      class="MuiPrivateTextarea-textarea-id MuiPrivateTextarea-shadow-id"
                      readonly=""
                      rows="1"
                      tabindex="-1"
                    />
                    <textarea
                      aria-invalid="false"
                      class="MuiPrivateTextarea-textarea-id MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputMultiline-id MuiOutlinedInput-inputMultiline-id"
                      disabled=""
                      name="description"
                      rows="1"
                      style="height:19px"
                    />
                  </div>
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                >
                  Optional
                </p>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Photo 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"
              >
                ‌
              </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Products
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div
            class="Hook-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id ColumnPickerButton-root-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id ColumnPickerButton-icon-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            data-tc="add-product"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Product
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-flexContainer-id"
        >
          <div
            class="MuiTabs-scroller-id MuiTabs-fixed-id"
            role="tablist"
            style="margin-bottom:0"
          >
            <div
              class="MuiTabs-flexContainer-id"
            >
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
                    >
                      All Products
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Tab X
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FilterChips-actionContainer-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Filter-addFilterText-id"
            >
              Add Filter
            </p>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id Filter-addFilterIcon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
              <path
                d="M0 0h24v24H0z"
                fill="none"
              />
            </svg>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="ProductList-tableContainer-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colName-id"
                scope="col"
              >
                <span
                  class="ProductList-colNameHeader-id"
                >
                  Name
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colType-id"
                scope="col"
              >
                Type
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPublished-id"
                scope="col"
              >
                Published
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPrice-id"
                scope="col"
              >
                Price
              </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                      >
                        <div
                          class="MuiSelect-root-id"
                        >
                          <div
                            aria-haspopup="true"
                            aria-pressed="false"
                            class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            type="hidden"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                      data-tc="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                          <path
                            d="M24 0v24H0V0h24z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-tc="button-pagination-next"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                          <path
                            d="M0 24V0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Nebula Night Sky Paint
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Paint
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $15.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Light Speed Yellow Paint
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Paint
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $15.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Hyperspace Turquoise Paint
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Paint
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $15.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Pineapple Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Coconut Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Apple Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Orange Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Banana Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Bean Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Carrot Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Green Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Code Division T-shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Polo Shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Polo Shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Polo Shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Polo Shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Black Hoodie
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Blue Hoodie
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Mustard Hoodie
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Colored Parrot Cushion
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Cushion
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $20.00
              </td>
            </tr>
          </tbody>
        </table>
      </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Products
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div
            class="Hook-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id ColumnPickerButton-root-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id ColumnPickerButton-icon-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            data-tc="add-product"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Product
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-flexContainer-id"
        >
          <div
            class="MuiTabs-scroller-id MuiTabs-fixed-id"
            role="tablist"
            style="margin-bottom:0"
          >
            <div
              class="MuiTabs-flexContainer-id"
            >
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      All Products
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Tab X
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FilterChips-actionContainer-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Filter-addFilterText-id"
            >
              Add Filter
            </p>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id Filter-addFilterIcon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
              <path
                d="M0 0h24v24H0z"
                fill="none"
              />
            </svg>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="ProductList-tableContainer-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"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    type="checkbox"
                    value="false"
                  />
                </button>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colName-id"
                scope="col"
              >
                <span
                  class="ProductList-colNameHeader-id"
                >
                  Name
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colType-id"
                scope="col"
              >
                Type
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPublished-id"
                scope="col"
              >
                Published
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPrice-id"
                scope="col"
              >
                Price
              </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                      >
                        <div
                          class="MuiSelect-root-id"
                        >
                          <div
                            aria-haspopup="true"
                            aria-pressed="false"
                            class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            type="hidden"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                      data-tc="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                          <path
                            d="M24 0v24H0V0h24z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                      data-tc="button-pagination-next"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                          <path
                            d="M0 24V0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                  >
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                      focusable="false"
                      role="presentation"
                      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"
                      />
                      <path
                        d="M0 0h24v24H0z"
                        fill="none"
                      />
                    </svg>
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </td>
            </tr>
          </tbody>
        </table>
      </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Products
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div
            class="Hook-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id ColumnPickerButton-root-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id ColumnPickerButton-icon-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            data-tc="add-product"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Product
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-flexContainer-id"
        >
          <div
            class="MuiTabs-scroller-id MuiTabs-fixed-id"
            role="tablist"
            style="margin-bottom:0"
          >
            <div
              class="MuiTabs-flexContainer-id"
            >
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
                    >
                      All Products
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Tab X
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FilterChips-actionContainer-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Filter-addFilterText-id"
            >
              Add Filter
            </p>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id Filter-addFilterIcon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
              <path
                d="M0 0h24v24H0z"
                fill="none"
              />
            </svg>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
      <hr
        class="Hr-root-id"
      />
      <div
        class="ProductList-tableContainer-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 ProductList-colName-id"
                scope="col"
              >
                <span
                  class="ProductList-colNameHeader-id"
                >
                  Name
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colType-id"
                scope="col"
              >
                Type
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPublished-id"
                scope="col"
              >
                Published
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPrice-id"
                scope="col"
              >
                Price
              </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                      >
                        <div
                          class="MuiSelect-root-id"
                        >
                          <div
                            aria-haspopup="true"
                            aria-pressed="false"
                            class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            type="hidden"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                      data-tc="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                          <path
                            d="M24 0v24H0V0h24z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-tc="button-pagination-next"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                          <path
                            d="M0 24V0h24v24H0z"
                            fill="none"
                          />
                        </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>
`;

exports[`Storyshots Views / Products / Product list with custom filters 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Products
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <div
            class="Hook-columnPicker-id"
          >
            <button
              class="MuiButtonBase-root-id MuiButton-root-id MuiButton-outlined-id MuiButton-outlinedPrimary-id ColumnPickerButton-root-id"
              tabindex="0"
              type="button"
            >
              <span
                class="MuiButton-label-id"
              >
                Columns
                <svg
                  aria-hidden="true"
                  class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id ColumnPickerButton-icon-id"
                  focusable="false"
                  role="presentation"
                  viewBox="0 0 24 24"
                >
                  <path
                    d="M7 10l5 5 5-5z"
                  />
                  <path
                    d="M0 0h24v24H0z"
                    fill="none"
                  />
                </svg>
              </span>
            </button>
          </div>
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            data-tc="add-product"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add Product
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-flexContainer-id"
        >
          <div
            class="MuiTabs-scroller-id MuiTabs-fixed-id"
            role="tablist"
            style="margin-bottom:0"
          >
            <div
              class="MuiTabs-flexContainer-id"
            >
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
                    >
                      All Products
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Tab X
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </div>
      <div
        class="FilterChips-actionContainer-id"
      >
        <div>
          <button
            class="MuiButtonBase-root-id Filter-filterButton-id Filter-addFilterButton-id"
            tabindex="0"
            type="button"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id Filter-addFilterText-id"
            >
              Add Filter
            </p>
            <svg
              aria-hidden="true"
              class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id Filter-addFilterIcon-id"
              focusable="false"
              role="presentation"
              viewBox="0 0 24 24"
            >
              <path
                d="M7 10l5 5 5-5z"
              />
              <path
                d="M0 0h24v24H0z"
                fill="none"
              />
            </svg>
          </button>
        </div>
        <div
          class="MuiFormControl-root-id MuiFormControl-fullWidth-id Hook-root-id"
        >
          <div
            class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
          >
            <fieldset
              aria-hidden="true"
              class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
              style="padding-left:8px"
            >
              <legend
                class="MuiPrivateNotchedOutline-legend-id"
                style="width:0.01px"
              >
                <span>
                  ​
                </span>
              </legend>
            </fieldset>
            <input
              aria-invalid="false"
              class="MuiInputBase-input-id MuiOutlinedInput-input-id Hook-input-id"
              placeholder="Search Products..."
              type="text"
              value=""
            />
          </div>
        </div>
      </div>
      <div
        class="FilterChips-filterContainer-id"
      >
        <div
          class="FilterChips-filterChipContainer-id"
        >
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 0
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 1
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 2
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 3
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 4
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 5
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 6
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 7
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 8
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 9
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 10
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 11
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property X is 12
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Y is 13
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
          <div
            class="FilterChips-filterButton-id"
          >
            <p
              class="MuiTypography-root-id MuiTypography-body2-id FilterChips-filterText-id"
            >
              Property Z is 14
            </p>
            <button
              class="MuiButtonBase-root-id FilterChips-filterIconContainer-id"
              tabindex="0"
              type="button"
            >
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id FilterChips-filterIcon-id"
                focusable="false"
                role="presentation"
                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"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </button>
          </div>
        </div>
        <a
          class="MuiTypography-root-id MuiTypography-body2-id Link-root-id Link-primary-id"
        >
          Delete Search
        </a>
      </div>
      <div
        class="ProductList-tableContainer-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"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colName-id"
                scope="col"
              >
                <span
                  class="ProductList-colNameHeader-id"
                >
                  Name
                </span>
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colType-id"
                scope="col"
              >
                Type
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPublished-id"
                scope="col"
              >
                Published
              </th>
              <th
                class="MuiTableCell-root-id MuiTableCell-head-id ProductList-colPrice-id"
                scope="col"
              >
                Price
              </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                      >
                        <div
                          class="MuiSelect-root-id"
                        >
                          <div
                            aria-haspopup="true"
                            aria-pressed="false"
                            class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                            role="button"
                            tabindex="0"
                          >
                            20
                          </div>
                          <input
                            type="hidden"
                            value="20"
                          />
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id MuiSelect-icon-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </svg>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div
                    class="TablePaginationActions-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                      data-tc="button-pagination-back"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M14 7l-5 5 5 5V7z"
                          />
                          <path
                            d="M24 0v24H0V0h24z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                    <button
                      class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                      data-tc="button-pagination-next"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M10 17l5-5-5-5v10z"
                          />
                          <path
                            d="M0 24V0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </div>
                </div>
              </td>
            </tr>
          </tfoot>
          <tbody
            class="MuiTableBody-root-id"
          >
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Nebula Night Sky Paint
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Paint
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $15.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Light Speed Yellow Paint
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Paint
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $15.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Hyperspace Turquoise Paint
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Paint
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $15.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Pineapple Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Coconut Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Apple Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Orange Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Banana Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Bean Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Carrot Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Green Juice
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Juice
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $3.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Code Division T-shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Polo Shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Polo Shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Polo Shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Polo Shirt
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Black Hoodie
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Blue Hoodie
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Mustard Hoodie
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Top (clothing)
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $30.00
              </td>
            </tr>
            <tr
              class="MuiTableRow-root-id MuiTableRow-hover-id ProductList-link-id"
            >
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id"
                    type="checkbox"
                    value="false"
                  />
                </button>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductList-colName-id"
              >
                <div
                  class="TableCellAvatar-content-id"
                >
                  <div
                    class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                  >
                    <img
                      class="MuiAvatar-img-id"
                      src="placeholder255x255.png"
                    />
                  </div>
                  <div
                    class="TableCellAvatar-children-id"
                  >
                    Colored Parrot Cushion
                  </div>
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colType-id"
              >
                Cushion
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPublished-id"
              >
                <div
                  class="StatusLabel-root-id undefined StatusLabel-successDot-id"
                >
                  Published
                </div>
              </td>
              <td
                class="MuiTableCell-root-id MuiTableCell-body-id ProductList-colPrice-id"
              >
                $20.00
              </td>
            </tr>
          </tbody>
        </table>
      </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Extended Hard
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    Extended Hard
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    Extended Soft
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    Normal Hard
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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="2"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiButton-label-id"
                      >
                        Add variant
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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="SingleAutocompleteSelectField-container-id"
                  data-tc="variant-attribute-input"
                >
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Borders
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        autocomplete="off"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        type="text"
                        value="portals"
                      />
                      <div>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
                <div
                  class="SingleAutocompleteSelectField-container-id"
                  data-tc="variant-attribute-input"
                >
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Legacy
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="true"
                        autocomplete="off"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        type="text"
                        value="Auto Loan Account"
                      />
                      <div>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Generic form error
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose photos
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantImages-root-id"
              >
                <div
                  class="ProductVariantImages-imageContainer-id"
                >
                  <img
                    class="ProductVariantImages-image-id"
                    src="placeholder60x60.png"
                  />
                </div>
                <div
                  class="ProductVariantImages-imageContainer-id"
                >
                  <img
                    class="ProductVariantImages-image-id"
                    src="placeholder60x60.png"
                  />
                </div>
                <div
                  class="ProductVariantImages-imageContainer-id"
                >
                  <img
                    class="ProductVariantImages-image-id"
                    src="placeholder60x60.png"
                  />
                </div>
                <div
                  class="ProductVariantImages-imageContainer-id"
                >
                  <img
                    class="ProductVariantImages-image-id"
                    src="placeholder60x60.png"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value="100"
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Cost price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value="12"
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Stock
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantStock-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="19"
                      />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Allocated: 12
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      SKU (Stock Keeping Unit)
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value="1230959124123"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Extended Hard
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <table
              class="MuiTable-root-id"
            >
              <tbody
                class="MuiTableBody-root-id"
              >
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id ProductVariantNavigation-tabActive-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    Extended Hard
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    Extended Soft
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    Normal Hard
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id MuiTableRow-hover-id ProductVariantNavigation-link-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id TableCellAvatar-avatar-id"
                      >
                        <img
                          class="MuiAvatar-img-id"
                          src="placeholder60x60.png"
                        />
                      </div>
                      <div
                        class="TableCellAvatar-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="2"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiButton-label-id"
                      >
                        Add variant
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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="SingleAutocompleteSelectField-container-id"
                  data-tc="variant-attribute-input"
                >
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Borders
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        autocomplete="off"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        type="text"
                        value="portals"
                      />
                      <div>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="SingleAutocompleteSelectField-container-id"
                  data-tc="variant-attribute-input"
                >
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Legacy
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <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>
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <g
                            style="fill-rule:evenodd"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                          </g>
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose photos
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantImages-root-id"
              >
                <div
                  class="ProductVariantImages-imageContainer-id"
                >
                  <img
                    class="ProductVariantImages-image-id"
                    src="placeholder60x60.png"
                  />
                </div>
                <div
                  class="ProductVariantImages-imageContainer-id"
                >
                  <img
                    class="ProductVariantImages-image-id"
                    src="placeholder60x60.png"
                  />
                </div>
                <div
                  class="ProductVariantImages-imageContainer-id"
                >
                  <img
                    class="ProductVariantImages-image-id"
                    src="placeholder60x60.png"
                  />
                </div>
                <div
                  class="ProductVariantImages-imageContainer-id"
                >
                  <img
                    class="ProductVariantImages-image-id"
                    src="placeholder60x60.png"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Selling price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="priceOverride"
                        type="number"
                        value="100"
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Cost price override
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        name="costPrice"
                        type="number"
                        value="12"
                      />
                      <div
                        class="MuiInputAdornment-root-id MuiInputAdornment-positionEnd-id PriceField-currencySymbol-id"
                      >
                        <p
                          class="MuiTypography-root-id MuiTypography-body2-id MuiTypography-colorTextSecondary-id"
                        >
                          USD
                        </p>
                      </div>
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Stock
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantStock-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="quantity"
                        type="text"
                        value="19"
                      />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-filled-id"
                    >
                      Allocated: 12
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      SKU (Stock Keeping Unit)
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                        name="sku"
                        type="text"
                        value="1230959124123"
                      />
                    </div>
                  </div>
                </div>
              </div>
            </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <form>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Variants
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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 TableCellAvatar-root-id"
                  >
                    <div
                      class="TableCellAvatar-content-id"
                    >
                      <div
                        class="MuiAvatar-root-id MuiAvatar-colorDefault-id TableCellAvatar-avatar-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSvgIcon-colorPrimary-id"
                          focusable="false"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </div>
                      <div
                        class="TableCellAvatar-children-id"
                      />
                    </div>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id ProductVariantNavigation-colName-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
                <tr
                  class="MuiTableRow-root-id"
                >
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                    colspan="2"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                      tabindex="0"
                      type="button"
                    >
                      <span
                        class="MuiButton-label-id"
                      >
                        Add variant
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Images
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Choose photos
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantImages-root-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="ProductVariantPrice-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Selling price override
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        name="priceOverride"
                        type="number"
                        value=""
                      />
                      <span />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                      data-shrink="false"
                    >
                      Cost price override
                    </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"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-inputType-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                        disabled=""
                        name="costPrice"
                        type="number"
                        value=""
                      />
                      <span />
                    </div>
                    <p
                      class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-disabled-id"
                    >
                      Optional
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Stock
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div
                class="ProductVariantStock-grid-id"
              >
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                      data-shrink="true"
                    >
                      Inventory
                    </label>
                    <div
                      class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="quantity"
                        type="text"
                        value="0"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                  >
                    <label
                      class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                    >
                      <fieldset
                        aria-hidden="true"
                        class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                        style="padding-left:8px"
                      >
                        <legend
                          class="MuiPrivateNotchedOutline-legend-id"
                          style="width:0.01px"
                        >
                          <span>
                            ​
                          </span>
                        </legend>
                      </fieldset>
                      <input
                        aria-invalid="false"
                        class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                        disabled=""
                        name="sku"
                        type="text"
                        value=""
                      />
                    </div>
                  </div>
                </div>
              </div>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create New Shipping Zone
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <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"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                            <path
                              d="M0 0h24v24H0z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </form>
</div>
`;

exports[`Storyshots Views / Shipping / Create shipping zone form errors 1`] = `
<div
  style="padding:24px"
>
  <form>
    <div
      class="Container-root-id"
    >
      <div
        class="ExtendedPageHeader-root-id"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Create New Shipping Zone
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-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-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <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"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                            <path
                              d="M0 0h24v24H0z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Europe
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  Shipping Zone Name
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Europe"
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <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"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                            <path
                              d="M0 0h24v24H0z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                  >
                    from $0.00
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    $48.11
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </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"
                  >
                    from $0.00
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    $95.24
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                  >
                    0 kg - 80 kg
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    $45.93
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </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"
                  >
                    from 0 kg
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    $73.87
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Europe
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="true"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value="Europe"
                  />
                </div>
                <p
                  class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
                >
                  Generic form error
                </p>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <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"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                            <path
                              d="M0 0h24v24H0z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                  >
                    from $0.00
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    $48.11
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </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"
                  >
                    from $0.00
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    $95.24
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                  >
                    0 kg - 80 kg
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    $45.93
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </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"
                  >
                    from 0 kg
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    $73.87
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-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"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                General Informations
              </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 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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="name"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Countries
              </span>
              <div
                class="CardTitle-toolbar-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                  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"
            >
              <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"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M7 10l5 5 5-5z"
                            />
                            <path
                              d="M0 0h24v24H0z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id CardTitle-constantHeight-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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-flat-id MuiButton-flatPrimary-id"
                  tabindex="0"
                  type="button"
                >
                  <span
                    class="MuiButton-label-id"
                  >
                    Add rate
                  </span>
                </button>
              </div>
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-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"
                    scope="col"
                  />
                  <th
                    class="MuiTableCell-root-id MuiTableCell-head-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"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id IconButtonTableCell-root-id"
                  >
                    <button
                      class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id"
                      disabled=""
                      tabindex="-1"
                      type="button"
                    >
                      <span
                        class="MuiIconButton-label-id"
                      >
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id"
                          focusable="false"
                          role="presentation"
                          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"
                          />
                          <path
                            d="M0 0h24v24H0z"
                            fill="none"
                          />
                        </svg>
                      </span>
                    </button>
                  </td>
                </tr>
              </tbody>
            </table>
          </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Shipping
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Shipping by zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </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"
                  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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                        >
                          <div
                            class="MuiSelect-root-id"
                          >
                            <div
                              aria-haspopup="true"
                              aria-pressed="false"
                              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              type="hidden"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                        data-tc="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                            <path
                              d="M24 0v24H0V0h24z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-tc="button-pagination-next"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 17l5-5-5-5v10z"
                            />
                            <path
                              d="M0 24V0h24v24H0z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                    </div>
                  </div>
                </td>
              </tr>
            </tfoot>
            <tbody
              class="MuiTableBody-root-id"
            >
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id ShippingZonesList-row-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </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-alignRight-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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id ShippingZonesList-row-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </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-alignRight-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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id ShippingZonesList-row-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </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-alignRight-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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id ShippingZonesList-row-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </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-alignRight-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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
              <tr
                class="MuiTableRow-root-id MuiTableRow-hover-id ShippingZonesList-row-id"
              >
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id MuiTableCell-paddingCheckbox-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </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-alignRight-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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <form>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping Weight Unit
                </label>
                <div
                  class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    class="MuiSelect-root-id"
                  >
                    <div
                      aria-haspopup="true"
                      aria-pressed="false"
                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
                      id="select-unit"
                      role="button"
                      tabindex="0"
                    >
                      KG
                    </div>
                    <input
                      name="unit"
                      type="hidden"
                      value="KG"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </div>
                </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"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
                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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Shipping
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Shipping by zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </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"
                  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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                        >
                          <div
                            class="MuiSelect-root-id"
                          >
                            <div
                              aria-haspopup="true"
                              aria-pressed="false"
                              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              type="hidden"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                        data-tc="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                            <path
                              d="M24 0v24H0V0h24z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                        data-tc="button-pagination-next"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 17l5-5-5-5v10z"
                            />
                            <path
                              d="M0 24V0h24v24H0z"
                              fill="none"
                            />
                          </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"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      type="checkbox"
                      value="false"
                    />
                  </button>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colName-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-colCountries-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id ShippingZonesList-alignRight-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-colorPrimary-id MuiIconButton-disabled-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <form>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping Weight Unit
                </label>
                <div
                  class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-disabled-id MuiFilledInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    class="MuiSelect-root-id"
                  >
                    <div
                      aria-haspopup="true"
                      aria-pressed="false"
                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-disabled-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id MuiInputBase-disabled-id MuiFilledInput-disabled-id"
                      id="select-unit"
                      role="button"
                    >
                      KG
                    </div>
                    <input
                      name="unit"
                      type="hidden"
                      value="KG"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </div>
                </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"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
                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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Shipping
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id CardTitle-constantHeight-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Shipping by zone
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add shipping zone
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
                  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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                        >
                          <div
                            class="MuiSelect-root-id"
                          >
                            <div
                              aria-haspopup="true"
                              aria-pressed="false"
                              class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                              role="button"
                              tabindex="0"
                            >
                              20
                            </div>
                            <input
                              type="hidden"
                              value="20"
                            />
                            <svg
                              aria-hidden="true"
                              class="MuiSvgIcon-root-id MuiSelect-icon-id"
                              focusable="false"
                              role="presentation"
                              viewBox="0 0 24 24"
                            >
                              <path
                                d="M7 10l5 5 5-5z"
                              />
                            </svg>
                          </div>
                        </div>
                      </div>
                    </div>
                    <div
                      class="TablePaginationActions-root-id"
                    >
                      <button
                        class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                        data-tc="button-pagination-back"
                        disabled=""
                        tabindex="-1"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M14 7l-5 5 5 5V7z"
                            />
                            <path
                              d="M24 0v24H0V0h24z"
                              fill="none"
                            />
                          </svg>
                        </span>
                      </button>
                      <button
                        class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                        data-tc="button-pagination-next"
                        tabindex="0"
                        type="button"
                      >
                        <span
                          class="MuiIconButton-label-id"
                        >
                          <svg
                            aria-hidden="true"
                            class="MuiSvgIcon-root-id"
                            focusable="false"
                            role="presentation"
                            viewBox="0 0 24 24"
                          >
                            <path
                              d="M10 17l5-5-5-5v10z"
                            />
                            <path
                              d="M0 24V0h24v24H0z"
                              fill="none"
                            />
                          </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 shipping zones found
                </td>
              </tr>
            </tbody>
          </table>
        </div>
      </div>
      <div>
        <form>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-filled-id"
                  data-shrink="true"
                >
                  Shipping Weight Unit
                </label>
                <div
                  class="MuiInputBase-root-id MuiFilledInput-root-id MuiFilledInput-underline-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <div
                    class="MuiSelect-root-id"
                  >
                    <div
                      aria-haspopup="true"
                      aria-pressed="false"
                      class="MuiSelect-select-id MuiSelect-selectMenu-id MuiSelect-filled-id MuiInputBase-input-id MuiFilledInput-input-id"
                      id="select-unit"
                      role="button"
                      tabindex="0"
                    >
                      KG
                    </div>
                    <input
                      name="unit"
                      type="hidden"
                      value="KG"
                    />
                    <svg
                      aria-hidden="true"
                      class="MuiSvgIcon-root-id MuiSelect-icon-id"
                      focusable="false"
                      role="presentation"
                      viewBox="0 0 24 24"
                    >
                      <path
                        d="M7 10l5 5 5-5z"
                      />
                    </svg>
                  </div>
                </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"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Save
                </span>
              </button>
            </div>
          </div>
        </form>
      </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          General Informations
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <h6
          class="MuiTypography-root-id MuiTypography-h6-id"
        >
          Site Settings
        </h6>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              General Informations
            </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 MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Name of your store
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Saleor e-commerce"
                />
              </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 MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                URL of your online store
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="domain"
                  type="text"
                  value="localhost:8000"
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Store Description
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="description"
                  type="text"
                  value="Lorem ipsum dolor sit amet"
                />
              </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>
        <h6
          class="MuiTypography-root-id MuiTypography-h6-id"
        >
          Company information
        </h6>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id SiteSettingsAddress-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Company
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="companyName"
                  type="text"
                  value="Saleor e-commerce"
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Address line 1
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="streetAddress1"
                  type="text"
                  value="01419 Bernhard Plain"
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-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"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="streetAddress2"
                  type="text"
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="Grid-root-id Grid-default-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  City
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="city"
                    type="text"
                    value="Kenstad"
                  />
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  ZIP / Postal code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="postalCode"
                    type="text"
                    value="89880-6342"
                  />
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="Grid-root-id Grid-default-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="UA"
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="countryArea"
                    type="text"
                  />
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Phone
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="phone"
                  type="text"
                  value="+41 876-373-9137"
                />
              </div>
            </div>
          </div>
        </div>
        <h6
          class="MuiTypography-root-id MuiTypography-h6-id"
        >
          Authentication keys
        </h6>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Authentication Keys
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add key
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
                >
                  Authentication Type
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id"
                  scope="col"
                >
                  Key
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-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"
                >
                  Facebook
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  n1n62jkn2123:123n
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          General Informations
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <h6
          class="MuiTypography-root-id MuiTypography-h6-id"
        >
          Site Settings
        </h6>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              General Informations
            </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 MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="name"
                  type="text"
                  value="Saleor e-commerce"
                />
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Generic form error
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                URL of your online store
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-error-id MuiOutlinedInput-error-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="domain"
                  type="text"
                  value="localhost:8000"
                />
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Generic form error
              </p>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-error-id MuiInputLabel-error-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="true"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="description"
                  type="text"
                  value="Lorem ipsum dolor sit amet"
                />
              </div>
              <p
                class="MuiFormHelperText-root-id MuiFormHelperText-contained-id MuiFormHelperText-error-id MuiFormHelperText-filled-id"
              >
                Generic form error
              </p>
            </div>
          </div>
        </div>
        <h6
          class="MuiTypography-root-id MuiTypography-h6-id"
        >
          Company information
        </h6>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id SiteSettingsAddress-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Company
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="companyName"
                  type="text"
                  value="Saleor e-commerce"
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Address line 1
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="streetAddress1"
                  type="text"
                  value="01419 Bernhard Plain"
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-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"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="streetAddress2"
                  type="text"
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="Grid-root-id Grid-default-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  City
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="city"
                    type="text"
                    value="Kenstad"
                  />
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                  data-shrink="true"
                >
                  ZIP / Postal code
                </label>
                <div
                  class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="postalCode"
                    type="text"
                    value="89880-6342"
                  />
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="Grid-root-id Grid-default-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-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"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <input
                      aria-invalid="false"
                      autocomplete="off"
                      class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-inputAdornedEnd-id MuiOutlinedInput-inputAdornedEnd-id"
                      type="text"
                      value="UA"
                    />
                    <div>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiFormControl-root-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"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                    name="countryArea"
                    type="text"
                  />
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                data-shrink="true"
              >
                Phone
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                  name="phone"
                  type="text"
                  value="+41 876-373-9137"
                />
              </div>
            </div>
          </div>
        </div>
        <h6
          class="MuiTypography-root-id MuiTypography-h6-id"
        >
          Authentication keys
        </h6>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Authentication Keys
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add key
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
                >
                  Authentication Type
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id"
                  scope="col"
                >
                  Key
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-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"
                >
                  Facebook
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  n1n62jkn2123:123n
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          General Informations
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-inverted-id"
      >
        <h6
          class="MuiTypography-root-id MuiTypography-h6-id"
        >
          Site Settings
        </h6>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              General Informations
            </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 MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-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"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="name"
                  type="text"
                  value=""
                />
              </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 MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-id"
                data-shrink="false"
              >
                URL of your online store
              </label>
              <div
                class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="domain"
                  type="text"
                  value=""
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-outlined-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"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="description"
                  type="text"
                  value=""
                />
              </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>
        <h6
          class="MuiTypography-root-id MuiTypography-h6-id"
        >
          Company information
        </h6>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id SiteSettingsAddress-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="companyName"
                  type="text"
                  value=""
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="streetAddress1"
                  type="text"
                  value=""
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="streetAddress2"
                  type="text"
                  value=""
                />
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="Grid-root-id Grid-default-id"
            >
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="city"
                    type="text"
                    value=""
                  />
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="postalCode"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="Grid-root-id Grid-default-id"
            >
              <div
                class="SingleAutocompleteSelectField-container-id"
              >
                <div
                  class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                >
                  <label
                    class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id MuiInputBase-adornedEnd-id MuiOutlinedInput-adornedEnd-id"
                    role="combobox"
                  >
                    <fieldset
                      aria-hidden="true"
                      class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                      style="padding-left:8px"
                    >
                      <legend
                        class="MuiPrivateNotchedOutline-legend-id"
                        style="width:0.01px"
                      >
                        <span>
                          ​
                        </span>
                      </legend>
                    </fieldset>
                    <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>
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <g
                          style="fill-rule:evenodd"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </g>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <div
                class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
              >
                <label
                  class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                >
                  <fieldset
                    aria-hidden="true"
                    class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                    style="padding-left:8px"
                  >
                    <legend
                      class="MuiPrivateNotchedOutline-legend-id"
                      style="width:0.01px"
                    >
                      <span>
                        ​
                      </span>
                    </legend>
                  </fieldset>
                  <input
                    aria-invalid="false"
                    class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                    disabled=""
                    name="countryArea"
                    type="text"
                    value=""
                  />
                </div>
              </div>
            </div>
            <div
              class="FormSpacer-spacer-id"
            />
            <div
              class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
            >
              <label
                class="MuiFormLabel-root-id MuiFormLabel-disabled-id MuiInputLabel-disabled-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-disabled-id MuiOutlinedInput-disabled-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
              >
                <fieldset
                  aria-hidden="true"
                  class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                  style="padding-left:8px"
                >
                  <legend
                    class="MuiPrivateNotchedOutline-legend-id"
                    style="width:0.01px"
                  >
                    <span>
                      ​
                    </span>
                  </legend>
                </fieldset>
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input-id MuiOutlinedInput-input-id MuiInputBase-disabled-id MuiOutlinedInput-disabled-id"
                  disabled=""
                  name="phone"
                  type="text"
                  value=""
                />
              </div>
            </div>
          </div>
        </div>
        <h6
          class="MuiTypography-root-id MuiTypography-h6-id"
        >
          Authentication keys
        </h6>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
        >
          <div
            class="CardTitle-root-id"
          >
            <span
              class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
            >
              Authentication Keys
            </span>
            <div
              class="CardTitle-toolbar-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Add key
                </span>
              </button>
            </div>
          </div>
          <div
            class="CardTitle-children-id"
          />
          <hr
            class="CardTitle-hr-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"
                >
                  Authentication Type
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id"
                  scope="col"
                >
                  Key
                </th>
                <th
                  class="MuiTableCell-root-id MuiTableCell-head-id"
                  scope="col"
                />
              </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"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id SiteSettingsKeys-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"
                        role="presentation"
                        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"
                        />
                        <path
                          d="M0 0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </td>
              </tr>
            </tbody>
          </table>
        </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Jacob Smith
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                          data-shrink="true"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value="Jacob"
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                          data-shrink="true"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value="Smith"
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                          data-shrink="true"
                        >
                          E-mail Address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value="admin@example.com"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </p>
              <div
                class="StaffPermissions-checkboxContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="hasFullAccess"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Account Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                If you want to disable this account uncheck the box below
              </p>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Jacob Smith
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
                    >
                      <span
                        class="isvg pending"
                      />
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id"
                      >
                        Change photo
                      </p>
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id"
                      >
                        Delete photo
                      </p>
                      <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 MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                          data-shrink="true"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value="Jacob"
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                          data-shrink="true"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value="Smith"
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                          data-shrink="true"
                        >
                          E-mail Address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value="admin@example.com"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          <span
            class="Skeleton-skeleton-id"
            style="width:10em"
          >
            ‌
          </span>
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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"
                    >
                      <p
                        class="MuiTypography-root-id MuiTypography-body2-id"
                      />
                    </div>
                  </div>
                </div>
                <div>
                  <div
                    class="StaffProperties-propGrid-id"
                  >
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-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"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-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"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-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"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0.01px"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value=""
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </p>
              <div
                class="StaffPermissions-checkboxContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="hasFullAccess"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
            <hr
              class="StaffPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="IMPERSONATE_USERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Impersonate customers
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_DISCOUNTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Manage sales and vouchers
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_MENUS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Manage navigation
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_ORDERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Manage orders
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_PAGES"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Manage pages
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_PRODUCTS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Manage products
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_SETTINGS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Manage settings
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_SHIPPING"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Manage shipping
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_STAFF"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Manage staff
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-disabled-id"
                      disabled=""
                      name="MANAGE_USERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                  >
                    Manage customers
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Account Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                If you want to disable this account uncheck the box below
              </p>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <button
                  class="MuiButtonBase-root-id MuiButtonBase-disabled-id Checkbox-root-id"
                  disabled=""
                  tabindex="-1"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-disabled-id"
                    disabled=""
                    name="isActive"
                    type="checkbox"
                    value="false"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Jacob Smith
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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 MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                          data-shrink="true"
                        >
                          First Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="firstName"
                            type="text"
                            value="Jacob"
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                          data-shrink="true"
                        >
                          Last Name
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="lastName"
                            type="text"
                            value="Smith"
                          />
                        </div>
                      </div>
                    </div>
                    <div
                      class="StaffProperties-prop-id"
                    >
                      <div
                        class="MuiFormControl-root-id MuiFormControl-fullWidth-id"
                      >
                        <label
                          class="MuiFormLabel-root-id MuiFormLabel-filled-id MuiInputLabel-root-id MuiInputLabel-formControl-id MuiInputLabel-animated-id MuiInputLabel-shrink-id MuiInputLabel-outlined-id"
                          data-shrink="true"
                        >
                          E-mail Address
                        </label>
                        <div
                          class="MuiInputBase-root-id MuiOutlinedInput-root-id MuiInputBase-fullWidth-id MuiInputBase-formControl-id"
                        >
                          <fieldset
                            aria-hidden="true"
                            class="MuiPrivateNotchedOutline-root-id MuiOutlinedInput-notchedOutline-id"
                            style="padding-left:8px"
                          >
                            <legend
                              class="MuiPrivateNotchedOutline-legend-id"
                              style="width:0"
                            >
                              <span>
                                ​
                              </span>
                            </legend>
                          </fieldset>
                          <input
                            aria-invalid="false"
                            class="MuiInputBase-input-id MuiOutlinedInput-input-id"
                            name="email"
                            type="text"
                            value="admin@example.com"
                          />
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Permissions
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Expand or restrict user's permissions to access certain part of saleor system.
              </p>
              <div
                class="StaffPermissions-checkboxContainer-id"
              >
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      name="hasFullAccess"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    User has full access to the store
                  </span>
                </label>
              </div>
            </div>
            <hr
              class="StaffPermissions-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id"
                      name="IMPERSONATE_USERS"
                      type="checkbox"
                      value="false"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Impersonate customers
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="MANAGE_DISCOUNTS"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Manage sales and vouchers
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="MANAGE_MENUS"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Manage navigation
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="MANAGE_ORDERS"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Manage orders
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="MANAGE_PAGES"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Manage pages
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="MANAGE_PRODUCTS"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Manage products
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="MANAGE_SETTINGS"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Manage settings
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="MANAGE_SHIPPING"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Manage shipping
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="MANAGE_STAFF"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Manage staff
                  </span>
                </label>
              </div>
              <div>
                <label
                  class="MuiFormControlLabel-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id Checkbox-root-id"
                    tabindex="0"
                    type="button"
                  >
                    <input
                      class="Checkbox-box-id Checkbox-checked-id"
                      name="MANAGE_USERS"
                      type="checkbox"
                      value="true"
                    />
                  </button>
                  <span
                    class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                  >
                    Manage customers
                  </span>
                </label>
              </div>
            </div>
          </div>
          <div
            class="CardSpacer-spacer-id"
          />
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-id"
              >
                Account Status
              </span>
              <div
                class="CardTitle-toolbar-id"
              />
            </div>
            <div
              class="CardTitle-children-id"
            />
            <hr
              class="CardTitle-hr-id"
            />
            <div
              class="MuiCardContent-root-id"
            >
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                If you want to disable this account uncheck the box below
              </p>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <button
                  class="MuiButtonBase-root-id Checkbox-root-id"
                  tabindex="0"
                  type="button"
                >
                  <input
                    class="Checkbox-box-id Checkbox-checked-id"
                    name="isActive"
                    type="checkbox"
                    value="true"
                  />
                </button>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  User is active
                </span>
              </label>
            </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Staff Members
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id"
            tabindex="0"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add staff member
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 StaffList-wideColumn-id"
              scope="col"
            >
              Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id"
              scope="col"
            >
              Email Address
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Chris Cooper
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Active
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Inactive
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Active
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Active
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Active
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Active
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Inactive
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Active
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Active
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Inactive
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Inactive
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id StaffList-tableRow-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <div
                class="StaffList-avatar-id"
              >
                <img
                  class="StaffList-avatarImage-id"
                  src="avatar1.png"
                />
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                Jacob Smith
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                Active
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              admin@example.com
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Staff Members
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        >
          <button
            class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-contained-id MuiButton-containedPrimary-id MuiButton-raised-id MuiButton-raisedPrimary-id MuiButton-disabled-id"
            disabled=""
            tabindex="-1"
            type="button"
          >
            <span
              class="MuiButton-label-id"
            >
              Add staff member
              <svg
                aria-hidden="true"
                class="MuiSvgIcon-root-id"
                focusable="false"
                role="presentation"
                viewBox="0 0 24 24"
              >
                <path
                  d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"
                />
                <path
                  d="M0 0h24v24H0z"
                  fill="none"
                />
              </svg>
            </span>
          </button>
        </div>
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 StaffList-wideColumn-id"
              scope="col"
            >
              Name
            </th>
            <th
              class="MuiTableCell-root-id MuiTableCell-head-id"
              scope="col"
            >
              Email Address
            </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 MuiToolbar-gutters-id TablePagination-toolbar-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"
                    >
                      <div
                        class="MuiSelect-root-id"
                      >
                        <div
                          aria-haspopup="true"
                          aria-pressed="false"
                          class="MuiSelect-select-id MuiSelect-selectMenu-id MuiInputBase-input-id MuiInput-input-id"
                          role="button"
                          tabindex="0"
                        >
                          20
                        </div>
                        <input
                          type="hidden"
                          value="20"
                        />
                        <svg
                          aria-hidden="true"
                          class="MuiSvgIcon-root-id MuiSelect-icon-id"
                          focusable="false"
                          role="presentation"
                          viewBox="0 0 24 24"
                        >
                          <path
                            d="M7 10l5 5 5-5z"
                          />
                        </svg>
                      </div>
                    </div>
                  </div>
                </div>
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-next"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </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"
                >
                  <p
                    class="MuiTypography-root-id MuiTypography-body2-id"
                  />
                </div>
              </div>
              <p
                class="MuiTypography-root-id MuiTypography-body2-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </p>
              <span
                class="MuiTypography-root-id MuiTypography-caption-id StaffList-statusText-id"
              >
                <span
                  class="Skeleton-skeleton-id"
                >
                  ‌
                </span>
              </span>
            </td>
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Taxes
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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 MuiTableRow-hover-id CountryList-tableRow-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
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="includeTax"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      All products prices are entered with tax included
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-checked-id MuiSwitch-checked-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id MuiSwitch-iconChecked-id"
                      />
                      <input
                        checked=""
                        class="MuiPrivateSwitchBase-input-id"
                        name="showGross"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Show gross prices to customers in the storefront
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiIconButton-root-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        name="chargeTaxesOnShipping"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Charge taxes on shipping rates
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiCardActions-action-id"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fetch taxes
                </span>
              </button>
            </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"
      >
        <h5
          class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
        >
          Taxes
        </h5>
        <div
          class="ExtendedPageHeader-action-id"
        >
          <div
            class="Component-root-id"
          />
        </div>
      </div>
      <div
        class="Grid-root-id Grid-default-id"
      >
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                  <td
                    class="MuiTableCell-root-id MuiTableCell-body-id CountryList-textRight-id"
                  >
                    <span
                      class="Skeleton-skeleton-id"
                    >
                      ‌
                    </span>
                  </td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
        <div>
          <div
            class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
          >
            <div
              class="CardTitle-root-id"
            >
              <span
                class="MuiTypography-root-id MuiTypography-h5-id CardTitle-title-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
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        disabled=""
                        name="includeTax"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      All products prices are entered with tax included
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        disabled=""
                        name="showGross"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Show gross prices to customers in the storefront
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <label
                class="MuiFormControlLabel-root-id MuiFormControlLabel-disabled-id"
              >
                <span
                  class="MuiSwitch-root-id"
                >
                  <span
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id MuiPrivateSwitchBase-root-id MuiSwitch-switchBase-id MuiSwitch-colorPrimary-id MuiPrivateSwitchBase-disabled-id MuiSwitch-disabled-id"
                    tabindex="-1"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <span
                        class="MuiSwitch-icon-id"
                      />
                      <input
                        class="MuiPrivateSwitchBase-input-id"
                        disabled=""
                        name="chargeTaxesOnShipping"
                        type="checkbox"
                      />
                    </span>
                  </span>
                  <span
                    class="MuiSwitch-bar-id"
                  />
                </span>
                <span
                  class="MuiTypography-root-id MuiTypography-body2-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id"
                >
                  <div
                    class="ControlledSwitch-label-id"
                  >
                    <span
                      class="ControlledSwitch-labelText-id"
                    >
                      Charge taxes on shipping rates
                    </span>
                    <div />
                  </div>
                </span>
              </label>
              <div
                class="FormSpacer-spacer-id"
              />
            </div>
            <hr
              class="Hr-root-id"
            />
            <div
              class="MuiCardActions-root-id"
            >
              <button
                class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiButton-root-id MuiButton-text-id MuiButton-textPrimary-id MuiButton-flat-id MuiButton-flatPrimary-id MuiButton-disabled-id MuiCardActions-action-id"
                disabled=""
                tabindex="-1"
                type="button"
              >
                <span
                  class="MuiButton-label-id"
                >
                  Fetch taxes
                </span>
              </button>
            </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Tax Rates in Austria
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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>
`;

exports[`Storyshots Views / Taxes / Reduced Tax Categories loading 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        <span
          class="Skeleton-skeleton-id"
          style="width:10em"
        >
          ‌
        </span>
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="Grid-root-id Grid-default-id"
    >
      <div>
        <div
          class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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"
                  >
                    ‌
                  </span>
                </td>
                <td
                  class="MuiTableCell-root-id MuiTableCell-body-id"
                >
                  <span
                    class="Skeleton-skeleton-id"
                  >
                    ‌
                  </span>
                </td>
              </tr>
            </tbody>
          </table>
        </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Translations to English
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-root-id"
    >
      <div
        class="MuiTabs-root-id FilterTabs-tabsRoot-id"
      >
        <div
          class="MuiTabs-flexContainer-id"
        >
          <div
            class="MuiTabs-scroller-id MuiTabs-fixed-id"
            role="tablist"
            style="margin-bottom:0"
          >
            <div
              class="MuiTabs-flexContainer-id"
            >
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Categories
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Collections
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id FilterTab-selectedTabLabel-id"
                    >
                      Products
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Sales
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Vouchers
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Pages
                    </span>
                  </span>
                </span>
              </button>
              <button
                class="MuiButtonBase-root-id MuiTab-root-id FilterTab-tabRoot-id MuiTab-textColorInherit-id"
                role="tab"
                tabindex="0"
                type="button"
              >
                <span
                  class="MuiTab-wrapper-id"
                >
                  <span
                    class="MuiTab-labelContainer-id"
                  >
                    <span
                      class="MuiTab-label-id FilterTab-tabLabel-id"
                    >
                      Product Types
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </div>
        </div>
      </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 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 MuiToolbar-gutters-id TablePagination-toolbar-id"
              >
                <div
                  class="TablePagination-spacer-id"
                />
                <div
                  class="TablePaginationActions-root-id"
                >
                  <button
                    class="MuiButtonBase-root-id MuiButtonBase-disabled-id MuiIconButton-root-id MuiIconButton-disabled-id TablePaginationActions-iconButton-id TablePaginationActions-disabled-id"
                    data-tc="button-pagination-back"
                    disabled=""
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M14 7l-5 5 5 5V7z"
                        />
                        <path
                          d="M24 0v24H0V0h24z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                  <button
                    class="MuiButtonBase-root-id MuiIconButton-root-id TablePaginationActions-iconButton-id"
                    data-tc="button-pagination-next"
                    tabindex="0"
                    type="button"
                  >
                    <span
                      class="MuiIconButton-label-id"
                    >
                      <svg
                        aria-hidden="true"
                        class="MuiSvgIcon-root-id"
                        focusable="false"
                        role="presentation"
                        viewBox="0 0 24 24"
                      >
                        <path
                          d="M10 17l5-5-5-5v10z"
                        />
                        <path
                          d="M0 24V0h24v24H0z"
                          fill="none"
                        />
                      </svg>
                    </span>
                  </button>
                </div>
              </div>
            </td>
          </tr>
        </tfoot>
        <tbody
          class="MuiTableBody-root-id"
        >
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id TranslationsEntitiesList-tableRow-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 MuiTableRow-hover-id TranslationsEntitiesList-tableRow-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>
`;

exports[`Storyshots Views / Translations / Language list default 1`] = `
<div
  style="padding:24px"
>
  <div
    class="Container-root-id"
  >
    <div
      class="ExtendedPageHeader-root-id"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Languages
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 MuiTableRow-hover-id TranslationsLanguageList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
            >
              niemiecki
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id TranslationsLanguageList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
            >
              angielski
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id TranslationsLanguageList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
            >
              hiszpański
            </td>
          </tr>
          <tr
            class="MuiTableRow-root-id MuiTableRow-hover-id TranslationsLanguageList-link-id"
          >
            <td
              class="MuiTableCell-root-id MuiTableCell-body-id TranslationsLanguageList-capitalize-id"
            >
              polski
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Languages
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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 TranslationsLanguageList-capitalize-id"
            >
              <span
                class="Skeleton-skeleton-id"
              >
                ‌
              </span>
            </td>
          </tr>
        </tbody>
      </table>
    </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"
    >
      <h5
        class="MuiTypography-root-id MuiTypography-h5-id Component-title-id"
      >
        Languages
      </h5>
      <div
        class="ExtendedPageHeader-action-id"
      >
        <div
          class="Component-root-id"
        />
      </div>
    </div>
    <div
      class="MuiPaper-root-id MuiPaper-elevation1-id MuiPaper-rounded-id MuiCard-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>
`;